Question

我正在尝试设置一个无线电检查类到div和所有以前的div鼠标悬停并删除鼠标。麻烦的是它设置为围绕每个div的'a'标记。

有没有办法设置为内部div？

 $(function() {
    $('.radio-fx').live( "mouseenter", function() { // Handles the mouseover
            var $self = $(this);
            $self.addClass('radio-checked').prevAll().addClass('radio-checked');
            $self.nextAll().removeClass('radio-checked');
    }).live ( "mouseout", function() { // Handles the mouseout
            $(this).removeClass('radio').prevAll().removeClass('radio');
    });
});   

  <div class="voteGroup">
       <input type="radio" id="price_0" value="1" name="price" style="display: none;" class="radio-checked">
       <a href="#" class="radio-fx price radio-checked" title=" check me ">
              <div class="radio"></div>
       </a>
       <input type="radio" id="price_1" value="2" name="price" style="display: none;" class="radio-checked">
       <a href="#" class="radio-fx price radio-checked" title=" check me ">
              <div class="radio"></div></a>
       <input type="radio" id="price_2" value="3" name="price" style="display: none;" class="radio-checked">
       <a href="#" class="radio-fx price radio-checked" title=" check me ">
               <div class="radio"></div>
       </a>
       <input type="radio" id="price_3" value="4" name="price" style="display: none;" class="radio-checked">
       <a href="#" class="radio-fx price radio-checked" title=" check me ">
               <div class="radio"></div>
       </a>
       <input type="radio" id="price_4" value="5" name="price" style="display: none;" class="radio-checked" checked="checked">
       <a href="#" class="radio-fx price radio-checked" title=" check me ">
               <div class="radio-checked"></div>
       </a>
   </div>

Answer 1

试试这个：

$self.prevAll().andSelf().children('div').addClass('radio-checked');

它会查找前面元素的子元素。

其他行应该是：

$self.nextAll().children('div').removeClass('radio-checked'); 

$(this).prevAll().andSelf().children('div').removeClass('radio');

Answer 2

$(function() {
    $('.radio-fx').live( "mouseenter", function() { // Handles the mouseover
            var $self = $(this);
            $self.prevAll().andSelf().find('div').addClass('radio-checked');
            $self.nextAll().find('div').removeClass('radio-checked');
    }).live ( "mouseout", function() { // Handles the mouseout
            $(this).prevAll().andSelf().find('div').removeClass('radio-checked');
    });
});

顺便说一句，live is deprecated in latest versions of jQuery - 改为使用on。

更新以下是使用on的版本：

$(function() {
    $('.radio-fx').on("mouseenter", function() { // Handles the mouseover
            var $self = $(this);
            $self.prevAll().andSelf().find('div').addClass('radio-checked');
            $self.nextAll().find('div').removeClass('radio-checked');
    }).on("mouseout", function() { // Handles the mouseout
            $(this).prevAll().andSelf().find('div').removeClass('radio-checked');
    });
});

jsFiddle sample。

jQuery将类设置为内部div

2 个答案: