jQuery不是和類

Question

我有2個錨鏈接（a.selector），當它被點擊時它有一個類應用到它的'活動箭頭'，並且點擊也從另一個錨中移除同名的類以及將不透明度降低至0.2。

然後，當用戶將鼠標懸停在沒有應用「主動箭頭」的錨點上時，我們希望具有淡入淡出效果，以便在鼠標移動時進入完全不透明狀態，並在鼠標離開時回到0.2。

遇到的問題IM是，無論。不和：似乎沒有沒有工作如預期，懸停效果的作品，但如果我點擊的錨，而徘徊在「主動箭頭」級被應用，但是當mouseleaves時，即使應用了「活動箭頭」類，不透明度也會再次下降到0.2。另外懸停然後不起作用的另一個鏈接，有'主動箭頭'刪除。

這是一個很難解釋的位，所以繼承了一些希望有所幫助的代碼。

*//If a.selector doesn't have the class 'active-arrow' then run the hoverFade function* 
$("a.selector").not(".active-arrow").hoverFade(); 

//Functions for first element 
     $('a.selector-1').click(function() { 
      $('a.selector-2').removeClass('active-arrow'); //Remove background image from corresponding element 
      $('ul#storage-items-2').fadeOut(1200).addClass('hide'); //Fade out then hide corresponding list 
      $(this).addClass('active-arrow', 'fast'); //Add background image to current element 
      $('ul#storage-items-1').removeClass('hide').fadeIn(1800); //Unhide and fade in the list 
      $('a.selector-2').fadeTo(500, 0.2); //Fade corresponding element 
      $(this).fadeTo(800, 1);//Fade this element to full opacity 
     }); 

我只包括用於TEH第一錨（a.selector-1）作爲第二錨定的代碼是相同的代碼，但只是改變的類名稱，以a.selector-2。

此外hoverFade函數是在一個單獨的文件，所以我們可以重新使用它。

jQuery.fn.hoverFade = function() { 
return this.each(function(){ 
     $(this).hover(
       function() { 
        $(this).fadeTo(500, 0.8); 
      }, 
       function() { 
        $(this).fadeTo(500, 0.2); 
     }); 
    }); 

}

每個錨點鏈接淡入和淡出的UL爲好。

任何幫助表示最欣賞

感謝

賈爾斯

Answer 1

這是您要使用.live()或.delegate()，像這樣的情況：

$("a.selector:not(.active-arrow)").live('mouseenter', function() { 
    $(this).fadeTo(500, 0.8); 
}).live('mouseleave', function() { 
    $(this).fadeTo(500, 0.2); 
}); 

如果使用.delegate()最上面一行看起來像這樣（ID =所有這些鏈接的共享父代的ID）：

$("#ID").delegate("a.selector:not(.active-arrow)", 'mouseenter', function() { 

你目前已經不起作用的原因是，它結合事件處理程序的元素，這些元素只有你使用當你發現他們的結合匹配選擇，一旦發生這種情況時，將在該元素上綁定事件處理程序.hover()mouseenter和mouseleave。班級後來改變並不重要，這些處理人員留在那裏。

使用上面的方法中，事件不是實際上在元件上直接，他們的.live()或#ID在.delegate()的情況下的情況下坐上的父，document。當鼠標事件發生在元素上時，它們會冒泡，並且父級會看到它們，檢查處理程序的選擇器是否匹配，然後是，如果是，則執行。這使得課程變化實際上很重要，因爲它在事件發生時被檢查，而不是在什麼時候被約束。