javascript - Click function inside for loop - Stack Overflow

admin管理员组

文章数量:1415653

I am trying to loop my .hide() and .show() click handlers and I can't get this simple part to work correctly. My buttons are called "#towele" etc. I'm assuminig I'm missing something stupid and obvious. All of the divs are hidden in css.

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

/UPDATE:------------------------------------------------------------------------

The following code is the code I am trying to minify.

$("#toprojects").click(function(){
    $("#projects").show();
    $("#slides").hide();
    $("#pages").hide();
    $("#wele").hide();
});

$("#toslides").click(function(){
    $("#projects").hide();
    $("#slides").show();
    $("#pages").hide();
    $("#wele").hide();
});

$("#topages").click(function(){
    $("#projects").hide();
    $("#slides").hide();
    $("#pages").show();
    $("#wele").hide();
});

if(window.location.hash === "#slides"){
    $("#projects").hide();
    $("#slides").show();
    $("#pages").hide();
    $("#wele").hide();
}

if(window.location.hash === "#projects"){
    $("#projects").show();
    $("#slides").hide();
    $("#pages").hide();
    $("#wele").hide();
}

if(window.location.hash === "#pages"){
    $("#projects").hide();
    $("#slides").hide();
    $("#pages").show();
    $("#wele").hide();
}

found a related post here and it solved it pretty nicely jQuery: Set click from array loop

I am trying to loop my .hide() and .show() click handlers and I can't get this simple part to work correctly. My buttons are called "#towele" etc. I'm assuminig I'm missing something stupid and obvious. All of the divs are hidden in css.

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

/UPDATE:------------------------------------------------------------------------

The following code is the code I am trying to minify.

$("#toprojects").click(function(){
    $("#projects").show();
    $("#slides").hide();
    $("#pages").hide();
    $("#wele").hide();
});

$("#toslides").click(function(){
    $("#projects").hide();
    $("#slides").show();
    $("#pages").hide();
    $("#wele").hide();
});

$("#topages").click(function(){
    $("#projects").hide();
    $("#slides").hide();
    $("#pages").show();
    $("#wele").hide();
});

if(window.location.hash === "#slides"){
    $("#projects").hide();
    $("#slides").show();
    $("#pages").hide();
    $("#wele").hide();
}

if(window.location.hash === "#projects"){
    $("#projects").show();
    $("#slides").hide();
    $("#pages").hide();
    $("#wele").hide();
}

if(window.location.hash === "#pages"){
    $("#projects").hide();
    $("#slides").hide();
    $("#pages").show();
    $("#wele").hide();
}

found a related post here and it solved it pretty nicely jQuery: Set click from array loop

• javascript
• jquery

Share Improve this question Follow edited May 23, 2017 at 10:33 CommunityBot 111 silver badge asked Apr 18, 2011 at 18:27 ThomasReggiThomasReggi 59.8k9797 gold badges260260 silver badges460460 bronze badges 0

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

I haven't tested this, but I think something along these lines should work for you:

var elements = ["wele", "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 = ["wele", "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

    });
});

You are running into an issue with closure. The value of i, regardless of which element is clicked, will be 4. There are many ways around it, but jQuery offers a particularly convenient one, the each function:

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

We need to see more of your code to be sure, but the obvious things that might be missing are:

1. You're using JQuery functionality here: have you included the jQuery library in your page?
2. The code above needs to be run after the document has fully loaded, otherwise the click() event may not get registered to the button properly. The best way to do this is to use jQuery's $(document).ready() method. Simply wrap all the above code inside the $(document).ready() {} function, and it should work.

You also need to pass the i variable into the click function, as it won't actually get called until later, and the original value of i will have long since disappeared by then.

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

As others have suggested, you could refactor the loop to use .each(), but I don't see any point in that. I might have used for(i in elements) {...} instead, but the syntax you've used is fine.

Looking at your updates with the code you're 'trying to minify', I think a different approach may work just as well. Using the JQuery toggle() function and some class names as well as the IDs, you can put the whole thing into a few lines, without needing a loop at all. Something like this:

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

Then your HTML code would have classes like so:

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

and

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

and similarly for slides, pages and wele.

I was trying to e up with a way to bine the hide() and show() lines into one using .toggle() with the showorhide flag, but it's too early in the morning to be thinking too hard. ;-) I'm sure there is a way though.

本文标签： javascriptClick function inside for loopStack Overflow