0

我正在尝试将一类无线电检查设置为一个 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>
4

2 回答 2

2

试试这个：

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

它寻找先前元素的子元素。

其他行应该是：

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

$(this).prevAll().andSelf().children('div').removeClass('radio');
于 2012-05-02T14:36:12.850 回答
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 在最新版本的 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示例。

于 2012-05-02T14:41:35.020 回答