0

我必须用某人编写的这段代码来修复一个小故障，但我对 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>
4

2 回答 2

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/

于 2012-06-20T18:38:52.423 回答
1 
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/

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

于 2012-06-20T19:17:22.960 回答