1

動作するコードをより効率的に記述する方法を見つけようとしていますが、非効率的です。基本的に、ナビゲーションには一連の Id 要素があり、ページの他の場所にあるさまざまな ID でクリック機能をトリガーします。要素を組み合わせてみましたが、うまくいかないようです:

$("#red, #green, #blue").bind("click", (function () {

$("#section-red, #section-green, #section-blue").trigger("click");

    alert("#section-red (Red heading) has been triggered!");
    alert("#section-green (Green heading) has been triggered!");
    alert("#section-blue (Blue heading) has been triggered!");

}));

...しかし、これはすべてをトリガーするようです。

以下でこれを行うことができますが、多くの ID の場合、維持および更新するのはモンスターになります。より良い方法があるかどうかはわかりません。

 $("#red").bind("click", (function () {
            $("#section-red").trigger("click");
            alert("#section-red (Red heading) has been triggered!");
          }));

   $("#green").bind("click", (function () {
            $("#section-green").trigger("click");
            alert("#section-green (Green heading) has been triggered!");
          }));
// etc...

ここで遊んでいるフィドルがありますが、まだ喜びはありません。基本的に、上部のナビゲーションをクリックすると、H2 見出しのシミュレートされたクリックがトリガーされますが、これはこの時点でのコード効率に過ぎません。

4

4 に答える 4

2

次のようなデータ属性をnav要素に追加します。

<ul>
    <li id="red" data-trigger-id="#section-red">Section Red</li>
    <li id="green" data-trigger-id="#section-green">Section Green</li>
    <li id="blue" data-trigger-id="#section-blue">Section Blue</li>
</ul>

次にjQueryで：

$("#red, #green, #blue").bind("click", (function () {
    var triggerID = $(this).data("trigger-id");
    $(triggerID).trigger("click");
}
于 2013-03-08T19:38:23.927 に答える
1

イベント委任を使用すると、2 つのイベント ハンドラーを登録するだけで済みます。

$("ul").delegate("li", "click", function() {
    var id = $(this).attr("id");
   $("#section-"+id).trigger("click");
});

$(document).delegate("h2", "click", function() {
   console.log($(this).attr("id"));
});

編集

要素のルックアップをキャッシュすることで、より効率的にすることができます

var h2 = [];
h2['red'] = $("#section-red");
h2['blue'] = $("#section-blue");
h2['green'] = $("#section-green");

ulデリゲートclickハンドラーの内部

h2[id].trigger('click');

フィドル

于 2013-03-08T19:43:15.580 に答える
0

ulまず、次のクラスを作成します。この例では、「セクション」と呼びます。

<ul class="sections">
    <li id="red">Section Red</li>
    <li id="green">Section Green</li>
    <li id="blue">Section Blue</li>
</ul>

次に、クリックを にバインドし$('.sections>li')、インデックスを取得して、相対 div に適用します。

$(".sections>li").click(function () {
   var index=$(this).index();
   $('.faqfield-question.accordion').eq(index).click();
});

それだけです！

デモ: http://jsfiddle.net/6aT64/43/

ご不明な点がございましたら、お気軽にお問い合わせください。

于 2013-03-08T19:45:07.263 に答える
0

このようなことをしてみませんか。これはすべてのブラウザーで機能します (IE を含む ;-) )

document.onclick = function(event){
    event = event || window.event; //IE does not pass Object of event.
    var target = event.target || event.srcElement;    

    switch(target.id){
        case "header-red":
        case "red-section":
            redClicked();
            break;
        case "header-green":
        case "green-section":
            greenClicked();
            break;
    }
};
于 2013-03-08T19:35:28.047 に答える