2

Jquery 今天头疼。我现在正在尝试在我的 jquery 中结合悬停和单击事件，对悬停功能的最新编辑取消了我的单击事件，我可以看到原因（我认为）。删除类覆盖了我的点击事件。

我想要实现的是，当我将鼠标悬停在一颗星上时，所有兄弟姐妹都被突出显示，基本上跟随鼠标，然后当我决定选择一颗星时，我应该能够点击它，它的所有兄弟姐妹加上我点击的那个都有应用的 addClass 方法

到目前为止我有什么

/* Hover Function */
$(document).ready(function(){
 $('.ratings li').hover(function(){
  $(this).prevAll().andSelf().addClass('goldstar');
   }, function() {
    $(this).prevAll().andSelf().removeClass('goldstar');
  });
});

/* Click Function */
$(document).ready(function(){
 $('.ratings li').click(function(){
  $(this).prevAll().andSelf().addClass('goldstar');
 });
});

/* Click functions to add a value */
$(document).ready(function(){
 $('#firstStar').click(function(){
  $('#hiddenRating').val(1);
 });
});

 $(document).ready(function(){
  $('#secondStar').click(function(){
    $('#hiddenRating').val(2);
 });
 });

 $(document).ready(function(){
  $('#thirdStar').click(function(){
   $('#hiddenRating').val(3);
  });
 });

$(document).ready(function(){
 $('#fourthStar').click(function(){
  $('#hiddenRating').val(4);
 });
});

$(document).ready(function(){
 $('#fifthStar').click(function(){
  $('#hiddenRating').val(5);
 });
});

表格

   <%= form_for @rating do |f| %>
   <%= f.hidden_field :ratings, :id => "hiddenRating" %>
   <%= f.hidden_field :user_id, :value => current_user.id %>
   <%= f.hidden_field :recipe_id, :value => @recipe.id %>
   <div class="ratings">
<ul>
 <li id="firstStar"></li>
 <li id="secondStar"></li>
 <li id="thirdStar"></li>
 <li id="fourthStar"></li>
 <li id="fifthStar"></li>
</ul>
    </div>

现在我知道必须有更好的方法来做到这一点，我有很多重复的代码，但我正在学习并想知道一些方法来重新考虑这一点。有没有办法将 .val 方法组合成一个？

关于悬停和单击功能，我了解您可以使用 on 方法并通过悬停和单击？虽然不知道如何实现这个

任何帮助表示赞赏，

编辑

提琴手

谢谢

4

5 回答 5

3

我添加了两个全局变量clicked，chosed_index 如果您还想将其选中到最后一个元素，则可以通过添加

chosed_index = $(this).index() + 1;  // in the hover listener

jQuery 更新代码 

$(document).ready(function(){
    var clicked = false; 
    var chosed_index = -1 ; 
    $('.ratings li').on('hover', function(){

           $(this).siblings().andSelf().removeClass('goldstar');         
           $(this).prevAll().andSelf().addClass('goldstar'); 

    }); 

    $('.ratings li').on('mouseleave', function(){
        $(this).siblings().andSelf().removeClass('goldstar');  


            $(".ratings li:nth-child("+chosed_index+")").prevAll().andSelf().addClass('goldstar');


    }); 



    $('.ratings li').click(function(){

        clicked = true; 
        chosed_index = $(this).index() + 1; 

        $(this).siblings().andSelf().removeClass('goldstar');
        $(this).prevAll().andSelf().addClass('goldstar');
    });
  });

检查小提琴更新

小提琴

我希望这可以帮助:)

于 2013-02-20T15:24:05.367 回答
2

尝试简化您的 javascript。

$(function () {
    $('#stars li').hover(function () {
        var li = $(this);
        li.prevAll().andSelf().addClass('goldstar');
        }, function () {
        var li = $(this);
        li.prevAll().andSelf().removeClass('goldstar');
    });

    $('#stars li').click(function () {
        var li = $(this);
        $('#rating').text(li.data('rating'));
    });
})();

看到这个小提琴：http: //jsfiddle.net/PVyXz/1/

于 2013-02-20T15:15:37.533 回答
1

向父级添加一个“锁定”类，以便您的 JS 知道是否进行了选择。然后仅在未进行选择时才对悬停进行操作。

$(document).ready(function(){
  // hover function
  $('.ratings li').hover(function(){
     $(this).prevAll().andSelf().addClass('goldstar');
     $('.ratings').removeClass('locked');
   }, function() {
     if (!$('.ratings').hasClass('locked')) {
       $(this).prevAll().andSelf().removeClass('goldstar');
     }
  });
  //click function 
  $('.ratings li').click(function(){
    $(this).prevAll().andSelf().addClass('goldstar');
    $('.ratings').addClass('locked');
  });
});

小提琴：http: //jsfiddle.net/q86b9/1/

于 2013-02-20T15:20:54.603 回答
1

为悬停使用单独的类（一个比金色更轻的阴影）

还可以清除 goldstar 类 on click for allli的后续点击

http://jsfiddle.net/pxfunc/vZDwg/14/

.ratings ul li.goldstarHover {
    color:yellow;
}

/* Hover Function */
$(document).ready(function () {
    $('.ratings li').hover(function () {
        $(this).prevAll().andSelf().addClass('goldstarHover');
    }, function () {
        $(this).prevAll().andSelf().removeClass('goldstarHover');
    });
});

/* Click Function */
$(document).ready(function () {
    $('.ratings li').click(function () {
        $('.ratings li').removeClass('goldstar');
        $(this).prevAll().andSelf().addClass('goldstar');
    });
});
于 2013-02-20T15:21:10.703 回答
0

我的方法略有不同，就像魅力一样。对于某些人来说，理解起来可能要简单得多。使用CSS父类来覆盖.savedgoldstar颜色做了大量的工作

http://jsfiddle.net/vZDwg/13/

/* Hover Function */
$(document).ready(function(){
 $('.ratings li').hover(function(){
     $(this).parent().addClass('hovered');
     $(this).prevAll().andSelf().addClass('goldstar');
   }, function() {
    $(this).parent().removeClass('hovered');
    $(this).prevAll().andSelf().removeClass('goldstar');
  });
});

/* Click Function */
$(document).ready(function(){
 $('.ratings li').click(function(){
  $(this).siblings().removeClass('savedgoldstar');
  $(this).prevAll().andSelf().addClass('savedgoldstar');
 });
});
于 2013-02-20T15:32:35.153 回答