2

リストにいくつかのリストが埋め込まれています。

  • [X] トップ リスト アイテム 1
    • [X] 内部リスト項目 1
    • [X] 内部リスト項目 2
      • [X] インナー インナー リスト項目 1
      • [X] インナー インナー リスト項目 2
    • [X] 内部リスト項目 3
  • [X] トップ リスト アイテム 2
  • [X] トップ リスト アイテム 3

リストはプログラム的に構築されているため、これは非常に基本的な例にすぎず、実際にははるかに大きくなります。[X] はチェックボックスです。数字は、クリックすると内側のリストを切り替えるリンクです。したがって、「トップ リスト アイテム 1」の「1」をクリックすると、内部リスト アイテム 1、2、および 3 が表示されます。

リストは次のように構成されています。

<ul>
     <li> Top List item 1
          <ul>
               <li> Inner List item 1</li>
               <li> Inner List item 2
               <ul>
                    <li> Inner Inner List item 1</li>
                    <li> Inner Inner List item 2</li>
               </ul>
               </li>
               <li> Inner List item 3</li>
          </ul>
     </li>
     <li> Top List item 2</li>
     <li> Top List item 3</li>
</ul>

私がやろうとしているのは、誰かがリスト項目のリンクをクリックすると、内部のリスト項目を切り替える (表示/非表示にする) ことです。

ただし、「Inner Inner list item 1」をクリックすると、トップリストアイテム1とその中のすべてがチェックされます。また、リンクをクリックして内部リストを切り替えると、すべてのチェックボックスがチェックされます。

これがJqueryです。

$("li:has(a)").click(function() {
    var checkbox = $("input[type=checkbox]", this);
    checkbox.prop('checked', !checkbox.prop("checked"));

    if(checkbox.data('check')) {
        $("#" + checkbox.id + " input[type=checkbox").each(function(){
            this.prop('checked', !checkbox.prop("checked"));
        });
    }
});

これを切り替えるために使用するJqueryは次のとおりです。

$("#patterns-data a[data-toggleid]").click(function() {
    var toggleid = $(this).data('toggleid');
    $("#" + toggleid).toggle();
});

したがって、ユーザーがリスト項目の任意の場所をクリックしてチェックボックスをオンにできる jquery が必要です。リスト アイテムの中に別のリストがある場合は、それらのチェック ボックスをすべてオンにします。また、ユーザーがリンクをクリックしてリスト (タグ) を切り替えた場合は、何もチェックせずにリストを切り替えます。

2 つのクリック イベントを組み合わせるのは良い考えかもしれませんが、最適な方法はわかりません。お手伝いありがとう。

編集：

OK、調査を行っていたところ、li のネストごとに 1 回、クリック イベントが複数回呼び出されていることがわかりました。そこで、stopPropagation を使用するようにコードを変更しました。クリックされたアイテムのチェックボックスのみが選択されるようになりました。クリックしたリスト項目内にあるすべてのリスト項目チェックボックスを選択する必要があります。

$("li:has(a)", "#patterns-data").click(function(e) { e.stopPropagation();

    var checkbox = $("> input[type=checkbox]", this);
    checkbox.prop('checked', !checkbox.prop("checked"));

    $("> li", this).each(function(){
        var chkbox = $("> input[type=checkbox]", this);
        chkbox.prop('checked', !checkbox.prop("checked"));
    });
});

また、ユーザーがリストを切り替えようとしているときにチェックボックスがチェックされないように、タグのクリックを無視する必要があります。

JSFiddle http://jsfiddle.net/683Te/のコードはこちら

4

1 に答える 1

3

私があなたの仕事を正しくすれば。1 つのイベント リスナーを設定し、そのターゲットを自分で操作するよりも優れています。ある種の委任。

$("#list").on("click", function(e){
   var target = e.target,
       targetName = target.tagName.toLowerCase();

   // and do everything by it tagname
   // the behavior is in example
});

チェックボックスの変更リスナーを設定し、必要なときにトリガーします。

例：

http://jsfiddle.net/yj8bv/ 内部のすべてのコメント。

于 2013-01-29T17:02:25.393 に答える