Question

我有用jQuery和PHP编写的脚本。这是一个小小的投票系统。当我将鼠标放在div上时，当我有指针时，它会显示一个黄色的星星指向。例如：http://prntscr.com/7pm8u6。它不像我想要的那样直观，因为黄色的星星出现在我页面上的每个帖子上。您可以在屏幕截图中看到它。我怎样才能使每个帖子的div都独一无二？

$(function(){ 

    $('.rate-btn').hover(function(){

        $('.rate-btn').removeClass('rate-btn-hover');
        var therate = $(this).attr('id');
        for (var i = therate; i >= 0; i--) {
            $('.rate-btn-'+i).addClass('rate-btn-hover');
        };
    });

    $('.rate-btn').click(function(){    
        var therate = $(this).attr('id');
        var theid = $(this).attr('name');
        var dataRate = 'act=rate&post_id='+theid+'&rate='+therate; //
        $('.rate-btn').removeClass('rate-btn-active');
        for (var i = therate; i >= 0; i--) {
            $('.rate-btn-'+i).addClass('rate-btn-active');
        };
        $.ajax({
            type : "POST",
            url : "http://localhost/rating/ajax.php",
            data: dataRate,
            success:function(){}
        });

    });
});

这是我的divs：

echo '<div id="1" alt="';$post_id=$query2['id'];echo $post_id; echo '" class="rate-btn-1 rate-btn" name="';$post_id=$query2['id'];echo $post_id; echo '"></div>';
echo '<div id="2" alt="';$post_id=$query2['id'];echo $post_id; echo '" class="rate-btn-2 rate-btn" name="';$post_id=$query2['id'];echo $post_id; echo '"></div>';
echo '<div id="3" alt="';$post_id=$query2['id'];echo $post_id; echo '" class="rate-btn-3 rate-btn" name="';$post_id=$query2['id'];echo $post_id; echo '"></div>';
echo '<div id="4" alt="';$post_id=$query2['id'];echo $post_id; echo '" class="rate-btn-4 rate-btn" name="';$post_id=$query2['id'];echo $post_id; echo '"></div>';
echo '<div id="5" alt="';$post_id=$query2['id'];echo $post_id; echo '" class="rate-btn-5 rate-btn" name="';$post_id=$query2['id'];echo $post_id; echo '"></div>';

Answer 1

如果我正确阅读了您的PHP，那么您已经掌握了明星与其姓名属性相关的信息。因此，您需要做的就是检索该信息，然后只选择具有正确名称的开头：

$('.rate-btn').hover(function(){

    $('.rate-btn').removeClass('rate-btn-hover');
    var postid = $(this).attr('name'); //Get the post id from the name.
    var therate = $(this).attr('id');
    for (var i = therate; i >= 0; i--) {
        //Only add the class to the stars with the right name.
        $('.rate-btn-'+i+'[name='+postid+']').addClass('rate-btn-hover');
    };
});

在您的代码中，您为多颗星提供相同的ID。这是不好的做法，因为ID：s应该是唯一的。考虑将该信息迁移到自定义属性中，如data-star-number或类似的东西。

如何识别点击的div。 jQuery的

1 个答案: