JQuery Показать / скрыть и счетчик функции для отдельных записей

Question

Это продолжение моего вопроса вчера .Функция добавляет к счетчику и показывает информацию при нажатии на звезду (и наоборот).Все отлично работает

Новая задача: функция применяется к отдельным записям в ленте активности, и я пытаюсь заставить ее работать для каждой отдельной записи.Прямо сейчас, если я нажму на звезду в одной записи, счетчик увеличится для всех записей.Как я могу заставить функцию jquery применяться к каждой отдельной записи в ленте активности?

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

Вот jsfiddle: http://jsfiddle.net/j5qAs/3/

Answer 1

Попробуйте это
Он добавляет .star-div обертку вокруг звезды и unstar
Он использует данные HTML, поэтому вы можете установить значение по умолчанию
Он использует контекст jQuery в селекторе (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);
    });    
});    

Answer 2

Проверьте мои ДЕМО .

В приведенном ниже коде предполагается, что $('.star').next() всегда .star_number, а $('.star_number').next() всегда .unstar.Если это не так, измените .next / .prev соответственно.

$(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);
    });    
});