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
    }

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

能够在点击的星号和之前的星号上保留“.ratings_over”类，而不是之后的星号。
给每个开始值，所以当第三个点击时，我应该有一个值与表单一起提交（显然我认为它可能）

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

将javascript更改为：

    $('.ratings_stars').hover(

        // Handles the mouseover

        function() {

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


        },

        // Handles the mouseout

        function() {

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

        }

    );

现在正在保留突出显示的开头，有没有办法检查有多少hasClass有高级？然后将值传递给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>

最后，我们修改了click事件处理程序：

$('.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。

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

1 个答案: