单击for循环中的函数

Click function inside for loop

本文关键字：函数 循环 for 单击      更新时间：2023-09-26

我正试图循环我的。hide()和。show()点击处理程序，我不能让这个简单的部分正确工作。我的按钮叫做"#towelcome"等等。我想我错过了一些愚蠢而明显的东西。所有的div都隐藏在css中。

var elements = ["welcome", "slides", "projects", "pages"];
for (i=0;i<=elements.length-1;i++){ 
    $("#to"+elements[i]).click(function() {
      $("#"+elements[i]).show();
    });
}

/更新 :------------------------------------------------------------------------

下面的代码是我想要最小化的代码。

$("#toprojects").click(function(){
    $("#projects").show();
    $("#slides").hide();
    $("#pages").hide();
    $("#welcome").hide();
});
$("#toslides").click(function(){
    $("#projects").hide();
    $("#slides").show();
    $("#pages").hide();
    $("#welcome").hide();
});
$("#topages").click(function(){
    $("#projects").hide();
    $("#slides").hide();
    $("#pages").show();
    $("#welcome").hide();
});
if(window.location.hash === "#slides"){
    $("#projects").hide();
    $("#slides").show();
    $("#pages").hide();
    $("#welcome").hide();
}
if(window.location.hash === "#projects"){
    $("#projects").show();
    $("#slides").hide();
    $("#pages").hide();
    $("#welcome").hide();
}
if(window.location.hash === "#pages"){
    $("#projects").hide();
    $("#slides").hide();
    $("#pages").show();
    $("#welcome").hide();
}

在这里找到了一个相关的帖子，它很好地解决了这个问题jQuery: Set click from array loop

我还没有测试过这个，但我认为沿着这些行应该为您工作:

var elements = ["welcome", "slides", "projects", "pages"];
var clickHandler = function(element) {
    var id = element.attr('id') || $(this).attr('id');
    $.each(elements, function(index, value) {
        var element = $('#' + value);
        if (id !== 'to' + element.attr('id')) {
            element.hide();
        } else {
            element.show();
        }
    });    
};
$.each(elements, function(index, value) {
    $('#to' + value).click(clickHandler);
});
if ($.inArray(window.location.hash, elements)) {
    var id = window.location.hash.substring(1);
    clickHandler($('#' + id));
}

var elements = ["welcome", "slides", "projects", "pages"];
jQuery.each(elements,function(){ 
element = this;
    $("#to"+element).live("click",function() {
      $("#"+element).show(); //  use toggle for hiding/show as per current state
    });
});

您遇到了闭包的问题。无论点击哪个元素，i的值都是4。有很多方法可以解决这个问题，但是jQuery提供了一个特别方便的方法，each函数:

var elements = ["welcome", "slides", "projects", "pages"];
$.each(elements, function(index, element) {
    $("#to" + element).click(function() {
        $("#" + element).show();
    });
});

我们需要看到更多的代码来确定，但明显的东西可能会丢失:

  1. 你在这里使用JQuery功能:你在你的页面中包含了JQuery库吗?
    2. 以上代码需要在文档完全加载后运行，否则click()事件可能无法正确注册到按钮。最好的方法是使用jQuery的$(document).ready()方法。只需将上述所有代码包装在$(document).ready() {}函数中，它就应该工作了。

您还需要将i变量传递给click函数，因为直到稍后才会实际调用它，并且i的原始值早就消失了。

$(document).ready() {
    var elements = ["welcome", "slides", "projects", "pages"];
    for (i=0;i<=elements.length-1;i++){ 
        $("#to"+elements[i]).click(function(i) {
            $("#"+elements[i]).show();
        });
    }
}

正如其他人建议的那样，您可以重构循环以使用.each()，但我认为这样做没有任何意义。我可能会使用for(i in elements) {...}，但您使用的语法是好的。

看看你的代码更新，你'试图缩小'，我认为一个不同的方法可能会工作得很好。使用JQuery toggle()函数和一些类名以及id，您可以将整个内容放入几行中，而根本不需要循环。像这样:

$(".to-button").click(function(){
    var name = $(this).attr('id').replace(/^to/,'');
    $(".infopanel").hide();
    $("#"+name).show();
});

那么你的HTML代码将有这样的类:

<div id='toprojects' class='to-button'>Projects</div>

和

<div id='projects' class='infopanel'>info about projects here...</div>

和类似的幻灯片，页面和欢迎。

我试图想出一种方法，将hide()和show()行合并为一个使用.toggle()和showorhide标志，但它是太早了，早上想得太辛苦了。我相信会有办法的。

相关文章：