Javascript jQuery Replace With仅对对象引用有效一次

我对replaceWith（或者更可能是对象引用）有一个奇怪的问题

我试图创建一种行表，其中要么有空的插槽，要么有满的插槽。作为示范，我做了这个简单的小提琴。在此小提琴中，4个空插槽被初始化。然后一个被填满了。然后同样的一个应该被清空。但事实上，它仍然被填满。这就好像我只能使用replaceWith一次，或者我不了解有关对象引用的某些内容

HTML

Javascript

var wrapper = $('.wrapper');
var empty = $('.slot.empty');
var full = $('.slot.full');

var slots = {};

for(var i = 0; i < 4; i++){
    slots[i] = empty.clone().show();
    wrapper.append(slots[i]);    
}

function fillSlot(id){
    slots[id].replaceWith(full.clone().show());
}

function emptySlot(id){
    slots[id].replaceWith(empty.clone().show());
}

fillSlot(1);
emptySlot(1);

var wrapper = $('#wrapper');
var slot = $('.slot');
var empty = $('.slot-content.empty');
var full = $('.slot-content.full');

var slots = {};

for(var i = 0; i < 4; i++){
    slots[i] = slot.clone().show();
    slots[i].html(empty.clone().show());
    wrapper.append(slots[i]);
}

function fillSlot(id){
    slots[id].html(full.clone().show());
    slots[id].find('.slot-content').html('hello');
}

function emptySlot(id){
    slots[id].html(empty.clone().show());
}

fillSlot(1);
emptySlot(1);
fillSlot(2);

var wrapper=$（'.wrapper'）；
var empty=$（'.slot.empty'）；
var full=$（'.slot.full'）；
var slots={}；
对于（变量i=0；i<4；i++）{
slots[i]=空的.clone（）.show（）；
append（slots[i]）；
}
函数填充槽（id）{
插槽[id].replaceWith（full.clone（）.show（））；
}
函数空位（id）{
插槽[id].replaceWith（empty.clone（）.show（））；
}
填充槽（1）；
空地（1）；

---

我希望对象var slots保留对div的引用，我不确定它是否在这样做。

不，它没有保留引用，但您可以很容易地修复它

下面是一些正在运行的代码：

var wrapper=$（'.wrapper'）；
var empty=$（'.slot.empty'）；
var full=$（'.slot.full'）；
对于（变量i=0；i<4；i++）{
append（empty.clone（）.show（））；
}
函数填充槽（id）{
$（“.wrapper.slot”）.eq（id）.replaceWith（full.clone（）.show（））；
}
函数空位（id）{
$（“.wrapper.slot”）.eq（id）.replaceWith（empty.clone（）.show（））；
}
填充槽（1）；
setTimeout（函数（）{
空地（1）；
}, 2000);
.slot{
宽度：50px；
高度：50px；
显示：无；
}
.空的{
背景色：红色；
}
.满{
背景颜色：蓝色；
}

空的
满满的
已更新

只要更改选择方法，并且不再需要
插槽
列表，代码就可以正常工作

替换：

function fillSlot(id){
    slots[id].replaceWith(full.clone().show());
}

function emptySlot(id){
    slots[id].replaceWith(empty.clone().show());
}

function fillSlot(id){
    wrapper.children().eq(id).replaceWith(full.clone().show());
}

function emptySlot(id){
    wrapper.children().eq(id).replaceWith(empty.clone().show());
}   

作者：

function fillSlot(id){
    slots[id].replaceWith(full.clone().show());
}

function emptySlot(id){
    slots[id].replaceWith(empty.clone().show());
}

function fillSlot(id){
    wrapper.children().eq(id).replaceWith(full.clone().show());
}

function emptySlot(id){
    wrapper.children().eq(id).replaceWith(empty.clone().show());
}   

直接从包装器中选择意味着从新鲜的
DOM
中选择。这将解决问题，看看更新的小提琴贝娄

它没有保留对DOM元素的引用。如果仍要使用该数组，则可以在每次更新其元素时重新填充该列表。效率不是很高，但我想它可以避免您在DOM中保存状态

function redraw() {
  $('.wrapper').empty();
  for(var i = 0; i < 4; i++){
    wrapper.append(slots[i]);    
  }
}

函数重画（）{
$（'.wrapper'）.empty（）；
对于（变量i=0；i<4；i++）{
append（slots[i]）；
}
}

谢谢你的回答。我知道为什么这个对象不保留引用，我真的希望如此。我只是添加了一个包装器槽，然后我将影响包装器的内容。这样，我总是有一个对插槽的引用

HTML

空
满满的

Javascript

var wrapper = $('.wrapper');
var empty = $('.slot.empty');
var full = $('.slot.full');

var slots = {};

for(var i = 0; i < 4; i++){
    slots[i] = empty.clone().show();
    wrapper.append(slots[i]);    
}

function fillSlot(id){
    slots[id].replaceWith(full.clone().show());
}

function emptySlot(id){
    slots[id].replaceWith(empty.clone().show());
}

fillSlot(1);
emptySlot(1);

var wrapper = $('#wrapper');
var slot = $('.slot');
var empty = $('.slot-content.empty');
var full = $('.slot-content.full');

var slots = {};

for(var i = 0; i < 4; i++){
    slots[i] = slot.clone().show();
    slots[i].html(empty.clone().show());
    wrapper.append(slots[i]);
}

function fillSlot(id){
    slots[id].html(full.clone().show());
    slots[id].find('.slot-content').html('hello');
}

function emptySlot(id){
    slots[id].html(empty.clone().show());
}

fillSlot(1);
emptySlot(1);
fillSlot(2);

var wrapper=$（'#wrapper'）；
变量插槽=$（'.slot'）；
var empty=$（'.slot content.empty'）；
var full=$（'.slot content.full'）；
var slots={}；
对于（变量i=0；i<4；i++）{
slot[i]=slot.clone（）.show（）；
slots[i].html（empty.clone（）.show（））；
append（slots[i]）；
}
函数填充槽（id）{
slots[id].html（full.clone（）.show（））；
插槽[id]。查找（'.slot content'）.html（'hello'）；
}
函数空位（id）{
插槽[id].html（空的.clone（）.show（））；
}
填充槽（1）；
空地（1）；
填充槽（2）；
问题在于插槽[i]没有指向div-因此replaceWith不会选择正确的项目。按如下方式更新循环（添加slot[i]=wrapper.find（“：last child”）：

for（变量i=0；i<4；i++）{
slots[i]=空的.clone（）.show（）；
append（slots[i]）；
slots[i]=wrapper.find（':last child'）
}

实际上，这可能会使代码更容易理解（用这个替换循环）

for（变量i=0；i<4；i++）{
append（empty.clone（）.show（））；
slots[i]=wrapper.find（':last child'）
}

在FF上测试和工作

for(var i = 0; i < 4; i++){
    wrapper.append(empty.clone().show());
    slots[i] = wrapper.find(':last-child')
}