JQuery:结合click / trigger元素来编写更高效的代码

JQuery: combine click / trigger elements for more efficiently written code?

本文关键字：高效 代码 元素 结合 click trigger JQuery      更新时间：2023-09-26

我正试图找出一种更有效的方法来编写我的代码，但它似乎效率低下。从本质上讲，我在导航中有一系列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标题的模拟点击，但这只是代码效率的问题。

我会给你的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>


$("#red, #green, #blue").bind("click", (function () {
    var triggerID = $(this).data("trigger-id");
    $(triggerID).trigger("click");
}

使用事件委托，您只需要注册两个事件处理程序。

$("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');

小提琴

首先，我要为ul - 创建一个类在本例中，我将其命名为"sections":

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

接下来，将单击even绑定到$('.sections>li')，获取索引，并将其应用于相对div。

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

这就是它的全部!

演示:http://jsfiddle.net/6aT64/43/

希望这对你有帮助，如果你有任何问题请告诉我!

这样做怎么样?这适用于所有浏览器(包括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;
    }
};
相关文章：