JQuery loop function only works on last element

Question

I'm working on a simple JQuery function for a news page. Basically the idea is simple...I have a news text div and then I will add a variety of buttons for different news items. The idea is that when the user clicks on a button, the div loads with the proper news text in an array. Seems to only work on the last button, so something is wrong with my loop. I'm new to this so I'm a little stumped!

HTML CODE

<div id="textbtn0">Btn1</div>
<div id="textbtn1">Btn2</div>
<div id="textbtn2">Btn3</div>
<div id="textbox">This is text</div>

JQUERY CODE

jQuery(document).ready(function() {
    var newsItems=new Array();
    newsItems[0]="News1";
    newsItems[1]="News2";
    newsItems[2]="News3";
    for(a=0;a<newsItems.length;a++){
        var num=a;
        jQuery("#textbtn"+num).mouseover(function() {
             $("#textbtn"+num).css('cursor', 'pointer');
        });

        $("#textbtn"+num).click(function()
        {
            $("#textbox").html(newsItems[num]);
        });
    };
});

possible duplicate of [Access outside variable in loop from Javascript closure](http://stackoverflow.com/questions/1331769/access-outside-variable-in-loop-from-javascript-closure) Not an exact duplicate, but the solution to this question is the same. — Kevin B, Aug 03 '12 at 18:02
Don't declare a function in a loop. This is a classic error that appears on SO endlessly. — Matt Ball, Aug 03 '12 at 18:02
i know this wont fix anything but. 1) use "var a" , 2) use $ instead of jQuery on the second time, 3) dont use semicolon on the closing loop "};" — ajax333221, Aug 03 '12 at 18:07

score 3 · Answer 1 · answered Aug 03 '12 at 18:10

Sorry, but you could avoid some problems doing a little more optimized code. Here's what I think you could have done. Hope you like it! I created a fiddle(here) to ensure this works like you wanted.

<div class="textHover" alt="News 1">Btn1</div>
<div class="textHover" alt="News 2">Btn2</div>
<div class="textHover" alt="News 3">Btn3</div>
<div id="textbox" >This is text</div>

jQuery(document).ready(function() {
    jQuery(".textHover").css('cursor', 'pointer');
    jQuery(".textHover").click(function()
    {
        $("#textbox").html($(this).attr('alt'));
    });
});

score 0 · Answer 2 · answered Aug 03 '12 at 18:12

I don't see why you wouldn't optimize a little bit, I did, and this is the jsFiddle result.

To explain exactly what I did, I got rid of the jQuery css declarations, and used regular css. I changed all the IDs to classes since they all shared the same type of information. Also, a mouseover event should be completely unnecessary since cursor: pointer only works on mouseover anyways in all browsers. Putting the array into one line was merely preference, and if you'd like you can initialize it individually like you were doing. Hope you like the solution!

I don't understand why this was downvoted. If I'm doing something wrong, please tell me, I'd like to know so I don't continue doing it. Thanks. — Vap0r, Aug 03 '12 at 18:21

score 0 · Answer 3 · answered Aug 03 '12 at 18:13

you can simply use jQuery.each

jQuery(document).ready(function() {
    var newsItems=new Array();
    newsItems[0]="News1";
    newsItems[1]="News2";
    newsItems[2]="News3";
    $.each( newsItems, function(i, l){
        $("#textbtn"+i).mouseover(function() {
            $("#textbtn"+i).css('cursor', 'pointer');
        });
        $("#textbtn"+i).click(function(){
            $("#textbox").html(newsItems[i]);
        });
    });
});

here's a working example => http://jsfiddle.net/abdullahdiaa/aawcn/

score 0 · Answer 4 · answered Oct 04 '20 at 06:15

These working examples are totally correct. But I still wanted to rectify your code.

jQuery(document).ready(function() {
    var newsItems=new Array();
    newsItems[0]="News1";
    newsItems[1]="News2";
    newsItems[2]="News3";
    for(let a=0;a<newsItems.length;a++){
        let num=a;
        jQuery("#textbtn"+num).mouseover(function() {
             $("#textbtn"+num).css('cursor', 'pointer');
        });

        $("#textbtn"+num).click(function()
        {
            $("#textbox").html(newsItems[num]);
        });
    }
});

score -1 · Answer 5 · answered Aug 03 '12 at 18:06

Here's the(a?) jQuery way of doing it:

jQuery(document).ready(function() {
    var newsItems=new Array();
    newsItems[0]="News1";
    newsItems[1]="News2";
    newsItems[2]="News3";
    for(a=0;a<newsItems.length;a++){
        jQuery("#textbtn"+a).mouseover({num:a},function(e) {
            $("#textbtn"+e.data.num).css('cursor', 'pointer');
        });
        $("#textbtn"+a).click({num:a},function(e){
            $("#textbox").html(newsItems[e.data.num]);
        });
    }
});

Edit: fixed missed click event

JQuery loop function only works on last element

5 Answers5

Linked