Question

我在处理问题时遇到了问题。我的问题是我正在创建一个静态导航。那使用触发事件。因为我正在显示一个简单的可折叠div。我做的是我在数组中包含我的所有id名称，然后循环它以创建一个事件。但是，当我点击链接时，我没有调用我的jquery事件。有什么方法可以防止硬编码导航？

这是我的示例代码：

var toggleState = true;
var header_name = ["ParentA", "ParentB", "ParentC", "ParentD"];
var child_name = ["ChildA", "ChildB", "ChildC", "ChildD"];

for (var x = 0; x < header_name.length; x++) {
    $("#" + header_name[x]).click(function (e) {
        if (toggleState) {
            $("#" + child_name[x]).show("slide");
        } else {
            $("#" + child_name[x]).hide("slide");
        }
        toggleState = !toggleState;
    });
}
<div id="ParentA">Click A</div>
<div id="ChildA" style="display: none">Child A</div>
<div id="ParentB">Click A</div>
<div id="ChildB" style="display: none">Child B</div>
<div id="ParentC">Click A</div>
<div id="ChildC" style="display: none">Child C</div>

这是小提琴：http://jsfiddle.net/rochellecanale/cveze/3/

Answer 1

改变这个：

var header_name = ("Parent A", "Parent B", "Parent C", "Parent D");

到这个

var header_name = ["Parent A", "Parent B", "Parent C", "Parent D"];

同样使用下一个变量

Answer 2

您需要为循环的每次迭代创建x的本地副本。最简单的方法是创建一个辅助函数，如getClickHandler：

function getClickHandler(x) {
    return function(e){
            if(toggleState){
                $("#" + child_name[x]).show("slide");
            }else{
                $("#" + child_name[x]).hide("slide");
            }
            toggleState = !toggleState;
          };
}

for(var x = 0; x < header_name.length; x++){
    $("#" + header_name[x]).click(getClickHandler(x));
}

这里的关键点是click内的函数稍后运行（异步）。由于变量作用域在Javascript中的工作方式，您的代码将x的相同引用传递给每个处理程序，这就是为什么所有这些都最终获得数组的最后一次迭代。执行上述操作会在当前迭代中创建x的副本，并将其存储在本地引用中（在处理函数内）。

Answer 3

如果您可以对html进行细微更改，则应该像

一样简单

<div id="ParentA" class="click-toggle" data-target="#ChildA">Click A</div>
<div id="ChildA" style="display: none">Child A</div>
<div id="ParentB" class="click-toggle" data-target="#ChildB">Click B</div>
<div id="ChildB" style="display: none">Child B</div>
<div id="ParentC" class="click-toggle" data-target="#ChildC">Click C</div>
<div id="ChildC" style="display: none">Child C</div>

然后

$(document).ready(function(){
    $('.click-toggle').click(function () {
        $($(this).data('target')).stop(true, true).slideToggle();
    })
});

演示：Fiddle

甚至

<div id="ParentA" class="click-toggle">Click A</div>
<div id="ChildA" style="display: none">Child A</div>
<div id="ParentB" class="click-toggle">Click B</div>
<div id="ChildB" style="display: none">Child B</div>
<div id="ParentC" class="click-toggle">Click C</div>
<div id="ChildC" style="display: none">Child C</div>

然后

$(document).ready(function(){
    $('.click-toggle').click(function () {
        $(this).next().stop(true, true).slideToggle();
    })
});

演示：Fiddle，如果你想保持左 - >＆gt;右侧幻灯片：Fiddle

使代码工作......主要问题是使用共享闭包变量toggleState ...每个菜单项应该有自己的状态变量...解决方案是创建一个私有闭包每一个

$(document).ready(function () {
    var header_name = ["ParentA", "ParentB", "ParentC", "ParentD"];
    var child_name = ["ChildA", "ChildB", "ChildC", "ChildD"];
    $.each(header_name, function (idx, id) {
        var toggleState = true;
        $('#' + id).click(function () {
            if (toggleState) {
                $("#" + child_name[idx]).show("slide");
            } else {
                $("#" + child_name[idx]).hide("slide");
            }
            toggleState = !toggleState;
        })
    })
});

演示：Fiddle

如何在使用循环时调用jquery事件触发器？

3 个答案: