Question

我有三个div元素，它们有一个关闭按钮（简化）：

<div class="box1" id="box1">
    <span>close</span>
</div>

<div class="box2" id="box2">
    <span>close</span>
</div>

<div class="box3" id="box3">
    <span>close</span>
</div>

如果我点击关闭按钮，则会删除第1个框 jquery removed()函数。因此，方框2的类别将为box1，以及其ID。对于其ID和CLASS将变为box2的方框3也是如此。

我使用了添加和删除类以及attr('oldID','newID')函数实现这一点。问题是，当我尝试访问新的盒子1（以前的盒子2）并使用类似$('#box1').fadeOut()的东西时，消失的那个是盒子2 （原来是方框3）。

你知道为什么会这样吗？

Answer 1

removed（）不是jQuery函数。相反，jQuery方法.remove()用于从DOM中删除匹配元素集。

请注意，ID必须是唯一的，无需更改。你可能只是在上课。

考虑避免全局变量并使用数据属性来保持排序。

你的jsfiddle可以简化为：

$('.header').on('click', function(e) {
    //
    // decide the animation direction....
    //
    var newBottom = ($(this).closest('.box').css('bottom') == '-180px') ? '0px' : '-180px';
    $(this).closest('.box').animate({'bottom':newBottom}, 200);
});

$('.close').on('click', function(e) {
    $(this).closest('.box').remove();
    $('.close').each(function(idx, ele) {
        var classNames = ['', 'second', 'third'];
        //
        // toggle classes
        //
        $(this).closest('.box').toggleClass(classNames[this.dataset.sortOrder - 1] + ' ' + classNames[idx]);
        var sortOrder = idx + 1;
        this.dataset.sortOrder = sortOrder;
        //
        // adjust titles
        //
        $(this).prev('.title').text(function(idx, txt) {
            return txt.replace(/\d$/, sortOrder)
        })
    })
});

.box {
    background: #ffffff;
    height: 200px;
    width: 150px;
    bottom: 0;
    z-index: 10;
    right: 30px;
    position: fixed;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    box-shadow: -2px 2px 20px #D8D8D8;
}

.second {
    right: 200px;
}

.third {
    right: 370px;
}

.header {
    height: 30px;
    width: 200px;
    cursor : pointer;
}

.title {
    float:left;
    background: #53DD6C;
}

.close {
    float:right;
    cursor : pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


<div class="box" id="first-box">
   <span class="header" id="first-header">
     <span class="title">Box 1</span>
     <span class="close" data-sort-order="1" id="first-close">X</span>
   </span>
</div>


<div class="box second" id="second-box">
   <span class="header" id="second-header">
     <span class="title">Box 2</span>
     <span class="close" data-sort-order="2" id="second-close">X</span>
   </span>
</div>



<div class="box third" id="third-box">
   <span class="header" id="third-header">
     <span class="title">Box 3</span>
     <span class="close" data-sort-order="3" id="third-close">X</span>
   </span>
</div>

Answer 2

看着你的jsfiddle，它看起来有点矫枉过正。您应该能够使用一个通用函数管理每个元素。

$('.header').on('click', function() {
    // Add or remove the 'expanded' class
    $(this).toggleClass('expanded');
    var boxId = $(this).attr('id').substring('header-'.length);
    
    // Set up the new bottom for animation
    var bottomPx = '-180px';
    if ($(this).hasClass('expanded')) {
        bottomPx = '0px';
    }
    
    $('#' + boxId).animate({'bottom':bottomPx}, 200);
});

$('.close').on('click', function() {
    var boxId = $(this).attr('id').substring('close-'.length);
    $('#' + boxId).remove();
});

.box {
    background: #ffffff;
    height: 200px;
    width: 150px;
    bottom: 0;
    z-index: 10;
    right: 30px;
    position: fixed;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    box-shadow: -2px 2px 20px #D8D8D8; 
}

.second {
  right: 200px;
}

.third {
  right: 370px;
}

.header {
  height: 30px;
  width: 200px;
  cursor : pointer;
}

.title {
 float:left;
 background: #53DD6C;
}

.close {
  float:right;
  cursor : pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 <div class="box" id="box1">
   <span class="header expanded" id="header-box1">
     <span class="title">Box 1</span>
     <span class="close" id="close-box1">X</span>
   </span>
 </div>
 
  <div class="box second" id="box2">
   <span class="header expanded" id="header-box2">
     <span class="title">Box 2</span>
     <span class="close" id="close-box2">X</span>
   </span>
 </div>
 
  <div class="box third" id="box3">
   <span class="header expanded" id="header-box3">
     <span class="title">Box 3</span>
     <span class="close" id="close-box3">X</span>
   </span>
 </div>

在更改div的ID后，它仍然引用旧元素（jQuery / JS）

2 个答案: