Question

This is a follow-up to my question yesterday. The function adds to a counter and shows information when the star is clicked (and vice versa). Everything works fine.

New challenge: the function applies to individual entries in an activity feed and I’m trying to get it to work for each individual entry. Right now, if I click the star in one entry, the counter increases for all the entries. How can I get the jquery function to apply to each individual entry in the activity feed?

jQuery

$(function(){
    $('.unstar').hide();
    var count1=0;

    $('.star').bind("click", function() { 
        if ($('.unstar').is(':hidden')) {
            count1++;
            $('.unstar').show();
            $('.star_number').html(count1);
        }
    });

    $('.unstar').bind("click", function() { 
        count1--;
        $('.unstar').hide();
        $('.star_number').html(count1);
    });    
});    

Here’s the jsfiddle: http://jsfiddle.net/j5qAs/3/

Answer 1

Try this one
It adds a .star-div wrapper around star and unstar
It uses HTML data, so you can set a default value
It uses jQuery context in selector (http://api.jquery.com/jQuery/#jQuery1)

http://jsfiddle.net/j5qAs/5/

---

HTML

<span href="" class="star-div" data-count="20">
    <span href="" class="star">
        Star
    </span>&nbsp;
    <span class="star_number"></span> &#183;&nbsp;
    <span class="unstar">Unlike</span> </span> <br /> <span href="" class="star-div" data-count="2">
    <span href="" class="star">
        Star
    </span>&nbsp;
    <span class="star_number"></span> &#183;&nbsp;
    <span class="unstar">Unlike</span> </span>

<br /> <span href="" class="star-div" data-count="12">
    <span href="" class="star">
        Star
    </span>&nbsp;
    <span class="star_number"></span> &#183;&nbsp;
    <span class="unstar">Unlike</span> </span>

---

javascript

$(function(){
    $('.unstar').hide();
    //var count1=0;

    $('.star').bind("click", function() { 
        var $starNum = $(this).next('.star_number'); 
        var $unstar = $starNum.next();
        var count = parseInt($starNum.text(), 10);
        if (isNaN(count)) count = 0;
        if ($unstar.is(':hidden')) {
            count++;
            $unstar.show();
            $starNum.html(count);
        }
    });

    $('.unstar').bind("click", function() { 
        var $starNum = $(this).prev();
        var count = parseInt($starNum.text(), 10);
        count--;
        $(this).hide();
        $starNum.html(count);
    });    
});