Question

这是my question yesterday的后续行动。该功能添加到计数器并在点击星形时显示信息（反之亦然）。一切正常。

新挑战：该功能适用于活动供稿中的各个条目，我正试图让它适用于每个单独的条目。现在，如果我单击一个条目中的星号，则所有条目的计数器都会增加。如何将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

检查我的DEMO。

以下代码假定$('.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);
    });    
});

Answer 2

试试这个它在星和unstar周围增加了.star-div包装它使用HTML数据，因此您可以设置默认值
它在选择器（http://api.jquery.com/jQuery/#jQuery1）

中使用jQuery上下文

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

各个条目的jquery显示/隐藏和计数器功能

2 个答案:

HTML

的JavaScript