jQuery設置類到內部div

我想設置一個無線電檢查到一個類的div和鼠標所有以前的div上，並刪除鼠標。麻煩的是，它設置爲圍繞每個div的'a'標籤。jQuery設置類到內部div

有沒有辦法設置爲內部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>

來源

2012-05-02 Keith Power

你能否給我們提供一個可用的http://jsfiddle.net/例子？ – ZeroOne

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

順便說一句，liveis 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。

來源

2012-05-02 14:41:35 Andrei

是的將改爲.on（），有幾個問題，但會花更多的時間在它上面 –

我得到一個錯誤$ innerDiv沒有定義 –

我有改變了這一行，現在當我懸停當前突出顯示的$ self.children（'div'）。addClass（'radio-checked'）。prevAll（）。addClass（'radio-checked'）; –

試試這個：

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

它查找以前的元素的孩子。

其他行應該是：

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

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

來源

2012-05-02 14:36:12

感謝您的回覆，當我將鼠標懸停在上一個div上時，現在已經上課了，但目前我上的並不是 –

好點。我已經把它分成兩個應該可以工作的陳述。 –

想象如何在一行中做到這一點:) –

jQuery設置類到內部div

回答

相關問題