0

誰かが書いたこのコードの不具合を修正する必要がありますが、自分でそれを理解できるほど jQuery のスキルがありません。多分ここの誰かが私を助けることができます。まず、何が起こるのかを説明しようと思います...

基本的には、名前の横にチェックボックスがある人のリストを作成するという考え方です。その下には、6 つの使用可能なスロット (空の div) があります。チェックボックスをオンにすると、人物の名前が空の div の 1 つに挿入されます。明らかに最大6つまで。

注意が必要なのは、チェックしたボックスのチェックを外すと、その名前がスロットから消え、その下にあるすべての名前が 1 つ上のスロットに移動してギャップを埋めることです。ここでグリッチが発生しています。ボックスのチェックを 2 回続けて外すと、2 回目は何も起こらず、3 回目は...

これは、これまでに用意した 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;
            });
        }
    }
});
});

チェックボックスの 1 つといくつかの 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インスペクターで見たように、チェックボックスをオフにすると、2番目の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 に答える