如何从评级系统上的点击星中检索价值

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

        }

    );

现在保留了突出显示的开始，有没有办法检查有多少 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 事件绑定到起点，并在那里处理逻辑。当您单击星号时，首先我们会从所有星号中删除 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
});

现在，当表单提交时，您将拥有 rating 字段，如果他们没有选择任何内容，则该字段将为 -1，如果他们选择任何内容，则为 1-5！

如果星星是您表单中唯一的东西（即没有其他要提交的内容），您可以放弃隐藏元素并立即从点击处理程序中发出$.post。