javascript - 如何从评级系统中点击的星星中检索值(value)

Question

我正在做一个 PHP 项目，对 ajax、javascript 或 json 不太了解，但我知道如果方向正确，我可以做到这一点。

我有一个表单(POST)供审核，在表单上我有 5 个起始评分，到目前为止，我已经能够使用以下方法使起始在悬停时改变颜色:

<div class=rating>
    <div class="star_1 ratings_stars"></div>
    <div class="star_2 ratings_stars"></div>
    <div class="star_3 ratings_stars"></div>
    <div class="star_4 ratings_stars"></div>
    <div class="star_5 ratings_stars"></div> 
</div>

在我的 JavaScript 上:

$('.ratings_stars').hover(

        // Handles the mouseover

        function() {

            $(this).prevAll().andSelf().addClass('ratings_over');


        },

        // Handles the mouseout

        function() {

            $(this).prevAll().andSelf().removeClass('ratings_over');

        }

    );

在我的 css 文件上

.ratings_stars
    {
        background: url('./images/star_blank.png') no-repeat; //images with blank star
    }

.ratings_over 
    {
        background: url('./images/star_overs.png') no-repeat; //colored star
    }

我现在遇到的两个问题是:

1. 能够在被点击的星号及其之前的星号上保留“. ratings_over”类，但不能在其之后的星号上保留该星号的类。

2. 给每个起始值，所以当点击第三个时，我应该随表单一起提交一个值(显然我不认为这是可能的)

总的来说，我想也许使用复选框进行评级，以便能够与表单一起提交值，但是我将如何在复选框上实现悬停效果？或者我只需勾选复选框即可？

将 JavaScript 更改为:

    $('.ratings_stars').hover(

        // Handles the mouseover

        function() {

            $(this).prevAll().andSelf().addClass('ratings_over');


        },

        // Handles the mouseout

        function() {

            $(this).nextAll().removeClass('ratings_over');

        }

    );

高亮的start现在被保留了，有没有办法检查有多少hasClass具有highted？然后将值传递给php，也许隐藏输入字段？

Answer 1

首先，您实际上不需要使用 jQuery 来处理悬停效果；仅使用 CSS 即可完成!

.ratings_stars {
   background: url('./images/star_blank.png') no-repeat; //images with blank star
}

.ratings_stars:hover {
   background: url('./images/star_overs.png') no-repeat; //colored star
}

接下来，您可以将 click 事件绑定(bind)到开始，并在那里处理逻辑。当您单击星号时，我们首先会从所有类中删除 selected 类，然后将 selected 添加到该类中。

将其添加到您的 CSS 中:

.ratings_stars.selected {
   background: url('./images/star_overs.png') no-repeat; //colored star
}

以及你的 JavaScript

$('.ratings_star').click(function() {
   $('.ratings_star').removeClass('selected'); // Removes the selected class from all of them
   $(this).addClass('selected'); // Adds the selected class to just the one you clicked
});

最后，我们需要某种方法来保留该值。有几种方法可以处理这个问题。一种方法是使用 jQuery 的 submit()方法来运行一些自定义代码，然后提交表单。您可以找出选择了哪颗星星，然后将其作为数据发送出去。

不过，我建议采用一种更简单的方法:为评分添加一个隐藏的输入字段，然后在您点击星星时更新它。

将此添加到您的表单中:

<!-- start the value at -1 so we know it hasn't been set yet -->
<input type="hidden" id="rating" name="rating" value="-1"> 

我们将使用 HTML 数据属性来存储评级值。将您的星星 HTML 标记更改为:

<div class=rating>
    <div class="ratings_stars" data-rating="1"></div>
    <div class="ratings_stars" data-rating="2"></div>
    <div class="ratings_stars" data-rating="3"></div>
    <div class="ratings_stars" data-rating="4"></div>
    <div class="ratings_stars" data-rating="5"></div> 
</div>

最后，我们修改点击事件处理程序:

$('.ratings_star').click(function() {
   $('.ratings_star').removeClass('selected'); // Removes the selected class from all of them
   $(this).addClass('selected'); // Adds the selected class to just the one you clicked

   var rating = $(this).data('rating'); // Get the rating from the selected star
   $('#rating').val(rating); // Set the value of the hidden rating form element
});

现在，当表单提交时，您将看到评分字段，如果他们没有选择任何内容，则该字段将为 -1；如果他们选择了任何内容，则该字段为 1-5!

如果星星是表单中唯一的内容(即没有其他内容需要提交)，您可以放弃隐藏元素，只需在点击处理程序中立即发出 $.post 即可。