CODEWITHSUNDEEP
jqueryloops
Adam
Adam

Reputation: 31

JQuery loop function only works on last element

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

Upvotes: 2

Views: 1568

Answers (5)

Akif
Akif

Reputation: 7640

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

Upvotes: 0

AbdullahDiaa
AbdullahDiaa

Reputation: 1336

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/

Upvotes: 0

Vap0r
Vap0r

Reputation: 2616

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!

Upvotes: 0

Marcelo Assis
Marcelo Assis

Reputation: 5194

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

Upvotes: 3

Kevin B
Kevin B

Reputation: 95023

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

Upvotes: -1

Related Questions