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

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

<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

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

$("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

做这样的事情怎么样。这适用于所有浏览器（包括 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 回答
0

首先，我将创建一个类ul-在这个例子中，我称之为“sections”：

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

接下来，将 click 绑定到$('.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 回答