Question

今天Jquery头疼。我现在正试图在我的jquery中结合悬停和点击事件，我的悬停功能的最新编辑已经取消了我的点击事件，我可以看到为什么（我认为）。 remove类覆盖了我的click事件。

我想要实现的是，当我将鼠标悬停在一个星上时，所有兄弟姐妹都会突出显示，基本上都是按照鼠标，然后当我决定选择一个明星时我应该能够点击它以及它的所有兄弟姐妹加上一个我点击了应用了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方法并传递悬停并点击？虽然不确定如何实现这个

任何帮助表示赞赏，

修改

Jsfiddle

由于

Answer 1

我添加了两个全局变量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');
    });
  });

检查小提琴更新

Fiddle

我希望这可以帮助:)

Answer 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/

Answer 3

向父级添加“已锁定”类，因此您的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/

Answer 4

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

也可以点击所有li点击后续点击次数

的金星级

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

Answer 5

我的方法略有不同，就像一个魅力的东西。有些人可能会更容易理解。 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');
 });
});

组合悬停并单击函数Jquery

5 个答案: