使用jQuery函数为div添加标签的故障

Question

我必须用某人编写的这段代码修复一个小故障，但我对jQuery的技能不够熟练，无法自己弄清楚。也许这里有人可以帮助我。首先，我将尝试解释应该发生的事情...

基本上，这个想法是你有一个人员列表，他们的姓名旁边有复选框。在它们下方，您有六个可用插槽（空div）。当您选中一个框时，该人员的姓名将插入到其中一个空div 中。显然最多最多六个。

棘手的部分是，如果您取消选中选中的框，则该名称应从插槽中消失，并且其下方的所有名称应向上移动一个插槽以填补空白。这就是故障发生的地方。如果您连续两次取消选中一个框，第二次没有任何反应，或者第三次，依此类推......

这是我们到目前为止拥有的jQuery函数：

$(function(){
$('input:checkbox').click(function(){
    var $cb = $(this),
        id  = this.id, // No need for `attr`
        member,
        prev;
    if(this.checked){  // No need for `attr`
        $("div[id^=member]").each(function() {
            if (!this.firstChild) {
                // It's empty, use it
                $(this).text($('label[for="'+ id +'"]').text()).attr("data-contents", id);
                return false; // Done
            }
        });
    }
    else {
        member = $('div[data-contents="' + id + '"]');
        if (member[0]) {
            member.empty('').removeAttr('data-contents');
            prev = member[0];
            member.nextAll().each(function() {
               if (!this.firstChild) {
                   return false; // Done
               }
               prev.appendChild(this.firstChild);
               prev = this;
            });
        }
    }
});
});

下面是其中一个复选框和一些div 的示例：

<input type='checkbox' name='check[]' id='155' value='155'/>
<label for='155'>John Doe</label>
<input type='checkbox' name='check[]' id='156' value='156'/>
<label for='156'>John Smith</label>

和

<div id="member1" class="member"></div>
<div id="member2" class="member"></div>

Answer 1

你的脚本中有一些奇怪的非jQuery行为，但我们现在就放手了。

正如我在浏览器的 DOM 检查器中看到的那样，问题在于，当您取消选中一个框时，它可能会将第二个 DIV 的内容重新分配给第一个 DIV，但它不会同时重新分配 data-contents 属性。

修改后的代码：

 prev.appendChild(this.firstChild);
 $(prev).attr('data-contents', $(this).attr('data-contents'));
 $(this).removeAttr('data-contents');
 prev = this;

http://jsfiddle.net/q6Vg9/

Answer 2

var names = {};
    $(function () {
        $('[type=checkbox]').on('change', function (e) {
            // index of the checkbox
            var index = $('[type=checkbox]').index(this);
            // modify your names array
            if ($(this).attr('checked') == 'checked') { // add
                names[$('label').eq(index).text()] = 'dummy';
            } else { // remove
                delete names[$('label').eq(index).text()];
            }
            // clear all members
            $('.member').text('');
            // fill all members (if any)
            index = 0;
            for (name in names) {
                $('.member').eq(index++).text(name);
            }
            return false;
        });
    });

基本上，代码所做的是将所有选中的名称存储在一个数组中。如果未选中某个名称，则将其从数组中删除。每次清除所有div 并重新填充新数据时。

你可以在这里查看： http://jsfiddle.net/NanYb/

我意识到我的代码与你的代码完全不同，但我希望你明白这一点。