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

我有三个具有关闭按钮（简化）的div元素：

关闭
关闭
关闭

如果单击关闭按钮，框1将通过 jquery

removed（）

函数。因此，方框2的类别将是

box1

，以及它的ID。同样的情况也适用于其ID和类别将成为

box2

的方框3

我使用add和remove类以及

attr（'oldID'，'newID'）

函数来 实现这一目标。问题是，当我尝试访问新的框1（以前的框2）并使用类似于

$（'#box1'）.fadeOut（）的东西时，消失的是框2
（原框注3）

您知道为什么会发生这种情况吗？
removed（）不是jQuery函数。相反，jQuery方法用于从DOM中删除匹配的元素集

请考虑ID必须是唯一的，并且不需要更改它们。你可以简单地在课堂上工作

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

您的JSFIDLE可以简化为：


$（'.header'）。在（'click'，函数（e）上{
//
//决定动画方向。。。。
//
var newBottom=（$（this）.closest（'.box'）.css（'bottom'）=='-180px'）？'0px'：'-180px'；
$（this）.closest（'.box'）.animate（{'bottom'：newBottom}，200）；
});
$（'.close'）。在（'click'，函数（e）上{
$（this）.closest（'.box'）.remove（）；
$（'.close'）。每个（函数（idx、ele）{
var classNames=[''，'第二'，'第三']；
//
//切换类
//
$（this）.closest（'.box'）.toggleClass（类名[this.dataset.sortOrder-1]+''+类名[idx]）；
var sortOrder=idx+1；
this.dataset.sortOrder=sortOrder；
//
//调整标题
//
$（this）.prev（'.title'）.text（函数（idx，txt）{
返回txt.replace（/\d$/，sortOrder）
})
})
});
.box{
背景：#ffffff；
高度：200px；
宽度：150px；
底部：0；
z指数：10；
右：30px；
位置：固定；
边框右上角半径：5px；
边框左上半径：5px；
盒影：-2px20px#D8D8D8；
}
.第二{
右：200px；
}
.第三{
右：370px；
}
.标题{
高度：30px；
宽度：200px；
光标：指针；
}
.头衔{
浮动：左；
背景#53DD6C；
}
.结束{
浮动：对；
光标：指针；
}

方框1
X
方框2
X
方框3
X
已删除（）不是jQuery函数。相反，jQuery方法用于从DOM中删除匹配的元素集

请考虑ID必须是唯一的，并且不需要更改它们。你可以简单地在课堂上工作

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

您的JSFIDLE可以简化为：


$（'.header'）。在（'click'，函数（e）上{
//
//决定动画方向。。。。
//
var newBottom=（$（this）.closest（'.box'）.css（'bottom'）=='-180px'）？'0px'：'-180px'；
$（this）.closest（'.box'）.animate（{'bottom'：newBottom}，200）；
});
$（'.close'）。在（'click'，函数（e）上{
$（this）.closest（'.box'）.remove（）；
$（'.close'）。每个（函数（idx、ele）{
var classNames=[''，'第二'，'第三']；
//
//切换类
//
$（this）.closest（'.box'）.toggleClass（类名[this.dataset.sortOrder-1]+''+类名[idx]）；
var sortOrder=idx+1；
this.dataset.sortOrder=sortOrder；
//
//调整标题
//
$（this）.prev（'.title'）.text（函数（idx，txt）{
返回txt.replace（/\d$/，sortOrder）
})
})
});
.box{
背景：#ffffff；
高度：200px；
宽度：150px；
底部：0；
z指数：10；
右：30px；
位置：固定；
边框右上角半径：5px；
边框左上半径：5px；
盒影：-2px20px#D8D8D8；
}
.第二{
右：200px；
}
.第三{
右：370px；
}
.标题{
高度：30px；
宽度：200px；
光标：指针；
}
.头衔{
浮动：左；
背景#53DD6C；
}
.结束{
浮动：对；
光标：指针；
}

方框1
X
方框2
X
方框3
X
看看你的JSFIDLE，它看起来有点过分了。您应该能够使用一个通用功能管理每个元素


$（'.header'）。在（'click'，function（）上{
//添加或删除“扩展”类
$（this.toggleClass（'expanded'）；
var-boxId=$（this.attr（'id'）.substring（'header-'）.length）；
//设置动画的新底部
var bottomPx='-180px'；
if（$（this）.hasClass（'expanded'））{
底部px='0px'；
}
$（'#'+boxId）.animate（{'bottom'：bottomPx}，200）；
});
$（'.close'）。在（'click'，function（）上{
var-boxId=$（this.attr（'id'）.substring（'close-'.length）；
$（'#'+boxId）.remove（）；
});
.box{
背景：#ffffff；
高度：200px；
宽度：150px；
底部：0；
z指数：10；
右：30px；
位置：固定；
边框右上角半径：5px；
边框左上半径：5px；
盒影：-2px20px#D8D8D8；
}
.第二{
右：200px；
}
.第三{
右：370px；
}
.标题{
高度：30px；
宽度：200px；
光标：指针；
}
.头衔{
浮动：左；
背景#53DD6C；
}
.结束{
浮动：对；
光标：指针；
}

方框1
X
方框2
X
方框3
X
看看你的JSFIDLE，它看起来有点过分了。您应该能够使用一个通用功能管理每个元素


$（'.header'）。在（'click'，function（）上{
//添加或删除“扩展”类
$（this.toggleClass（'expanded'）；
var-boxId=$（this）.attr（'id'）.substring（'header
<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>