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 
$(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 に答える
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 に答える