Question

我试图循环我的.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();
    });
}

/ UPDATE：-------------------------------------------- ----------------------------

以下代码是我想要缩小的代码。

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

Answer 1

我没有对此进行过测试，但我认为这些方面的内容对您有用：

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

Answer 2

我们需要确保您的代码更多，但可能缺少的显而易见的事情是：

您在这里使用JQuery功能：您是否在页面中包含了jQuery库？
上面的代码需要在文档完全加载后运行，否则click（）事件可能无法正确注册到按钮。执行此操作的最佳方法是使用jQuery的$(document).ready()方法。只需将所有上述代码包装在$(document).ready() {}函数中，它就可以正常工作。

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

$(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) {...}，但你使用的语法很好。

Answer 3

您遇到了关闭的问题。无论点击哪个元素，i的值都为4。有很多方法，但jQuery提供了一个特别方便的方法，即each函数：

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

Answer 4

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

    });
});

Answer 5

使用您试图缩小的代码查看更新，我认为不同的方法也可以正常工作。使用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标记，但现在还为时过早了早上想得太辛苦了。 ;-)我确定有办法。

点击里面的功能循环

5 个答案: