Question

我试图找出一种更有效的方法来编写我的代码，但它似乎效率低下。基本上我在导航中有一系列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...

I have a fiddle here 我一直在玩，但仍然没有快乐。基本上点击顶部导航会触发H2标题的模拟点击，但这只是代码效率。

Answer 1

我会将数据属性添加到您的导航元素，如：

<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");
}

Answer 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');

Fiddle

Answer 3

做这样的事情怎么样？这适用于所有浏览器（包括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;
    }
};

Answer 4

首先，我会在此示例中为ul - 创建一个类，我称之为“sections”：

<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/

希望这有帮助，如果您有任何问题，请告诉我们！

JQuery：结合点击/触发元素以更有效地编写代码？

4 个答案: