javascript - 更改 div 的 ID 后，它仍然引用旧元素(jQuery/JS)

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。对于盒子 3 也是如此，其 ID 和 CLASS 将变为 box2 。

我使用了添加和删除类，以及 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>