1

次のような Html のリストのツリーがあります。

<ul class="myTree">
    <li class="treeItem">Category 1
        <ul>
            <li class="treeItem">Subcategory 1 1</li>
            <li class="treeItem">Subcategory 1 2
                <ul>
                    <li class="plus"><input type="text" value="Add a product"/></li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="treeItem">Category 2
        <ul>
            <li class="treeItem">Subcategory 1 1</li>
            <li class="treeItem">Subcategory 1 2
                <ul>
                    <li class="plus"><input type="text" value="Add a product"/></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

ご覧のとおり、かなり精巧なリストです。

ここで必要なのは、対応する名前 (カテゴリ 1、サブカテゴリ 1 1 など) を取得する「treeItem」クラス要素のクリック イベントです。

私はこれを思いついた：

$(".myTree").on("click", ".treeItem", function() {
    var categoryName = $(this).text();
    alert(categoryName);
});

私が今直面している唯一の問題は、まず第一にcategoryName、

Category 2

                Subcategory 1 1
                Subcategory 1 2

「レベル1」<li>（カテゴリ1など）をクリックしたとき。catnameにいくつかの属性を追加することでこれをバイパスできます<li>が、最も重要なことは、「レベル 2」<li>(サブカテゴリ 1 1 など) をクリックすると、最初にレベル 2<li>でクリック イベントがトリガーされ、処理が実行されてから、新しいレベル 1 のクリック イベント<li>...

なぜそうするのかは明らかですが、最高レベルで1回だけ発生させる方法が必要です（「サブカテゴリ1 1」をクリックすると、「カテゴリ1」でイベントが発生するはずがありません）。

treeItemこのツリーが自動的に生成されることも注目に値します。つまり、「level1」などの他のクラスで自分のにラベルを付けることができますが、それを避けることができれば、それが大好きです。

...わかりました、この質問には要約が必要かもしれません...

  1. リストのツリーでクリック イベントが必要です
  2. そのクリック イベントを最高レベル (最深部) でのみ発生させる必要があります。
  3. いくつかのクラス名を追加することは可能ですが、避けたいです。

ありがとうございました！

4

2 に答える 2

3

まずevent.stopPropagation、イベントが DOM をバブリングし、それ自体を繰り返すのを停止するために使用する必要があります。次に、 内の最初のテキスト ノードを取得する必要がありますli。これを試して：

$(".myTree").on("click", ".treeItem", function(e) {
    e.stopPropagation();
    var categoryName = $(this).contents().filter(function() {
        return !!$.trim(this.innerHTML||this.data);
    }).first().text();
    alert(categoryName);
});

フィドルの例

于 2012-05-02T09:51:33.250 に答える
0

event.stopPropagation()イベントで使用する必要があります。

$(".myTree").on("click", ".treeItem", function(event) {
    var categoryName = $(this).text();
    alert(categoryName);
    event.stopPropagation()
});
于 2012-05-02T09:51:17.713 に答える