CODEWITHSUNDEEP
javascriptjqueryhtmlcss
snnlankrdsm
snnlankrdsm

Reputation: 1401

Why all the spans are changed instead of one?

I have prev and next button:

This is function of next button:

var nextFn = function(e)
    {
        var current = $('.active');
        alert(current);
        var prev = $('#prev');
        pos = $('.active').attr('id');

        $("#num").text('(' + pos + '/' + researchPlaces.length + ')');


        $(current).next().attr("class", "active");
        $(current).attr("class", "passive"); 
        //e.stopPropagation();          
    };

When I click next, it supposed to show the next span. However, it also shows the next span in other li(s) in the page.

 <li class="memberElement" style="width: 100%; padding: 10px 0 10px 0; border-bottom: 1px solid #ccc;">
    <div class="MemberImageHolder" style="float:left">
        <a href="#">
            <img class="memberpic" src="picture.php?action=display&amp;contentType=members&amp;id=5&amp;quality=medium" alt="">
        </a>
    </div>
    <div class="memberDetails">
        <a href="#!uottawa/members/5/profile">Charles Darwin</a>
        <div id="title">Professor</div><div id="unit">
            <b>University of Ottawa</b>
        </div>
        <div id="address">
            <a id="prev">Prev </a>
            <span id="1" class="active">150 York Street</span>
            <span id="2" class="passive">80 Elgin Street</span>
            <span id="num" class="passive">(0/2)</span>
            <a id="next"> Next</a>
        </div>
    </div>
    <span class="divider"></span>
</li>

This is my one of the li(s). What's wrong?

Upvotes: 0

Views: 97

Answers (2)

Mathieu Labrie Parent
Mathieu Labrie Parent

Reputation: 2596

I think is because of your selector : 

$('.active');

This selector select all the control that has active class. I guess you have one active span in each li.

To modify class, you should use addClass instead of modifying the attribute :

$(current).next().addClass("active");
$(current).removeClass("passive");

This way you won't lose other class associated with your control.

Edit :

You can get the li by the link clicked :

$("#prev").click(function()
{
    var li = $(this).closest("li");
    var current = $(li).find('.active');
    alert(current);
    var prev = $('#prev');
    pos = $('.active').attr('id');

    $("#num").text('(' + pos + '/' + researchPlaces.length + ')');


    $(current).next().attr("class", "active");
    $(current).attr("class", "passive"); 
    //e.stopPropagation();          
});

Upvotes: 1

Martin Ernst
Martin Ernst

Reputation: 3279

If each div with class 'address' is structured as in your code you can try:

var current = $(this).parent().find('.active');

Upvotes: 0

Related Questions