jQuery懸停/點擊功能問題

Question

我創建了一個函數來處理一些交互。我正在使用Clicks和Hovers的功能。在這種情況下，我將它用於Hover。它工作得很好，但有一個捕獲。當您將鼠標懸停在鏈接上並將鼠標懸停在其上時，沒有任何反應。您必須先將鼠標懸停在另一個鏈接上，然後才能將鼠標懸停回來查看反饋。結果與點擊次數相同。如果你點擊鏈接。顯示反饋，如果再次單擊相同鏈接，反饋消失。我創建了一個JSFiddle作爲懸停和點擊的示例。

懸停：

// Applying Best Practices 
$(function(){ 
function applyingBestPractices(event) { 

    // Create Vars 
    var clickedClass = $(this).attr('class'); 
    var examples = $(".applying-best-practices .examples"); 
    var links = $(".applying-best-practices .nav a"); 

    // Add Tabindex to all Results 
    examples.each(function(index) { 
     $(this).attr('tabindex', index) 
    }); 

    // Remove class for all 
    examples.removeClass("showIT"); 
    links.removeClass("nav-select"); 

    // Adds active class to link 
    $(this).addClass("nav-select"); 

    // Add Class and Focus 
    $("#" + clickedClass).addClass("showIT").focus(); 
    return false; 
} 
$(".applying-best-practices .nav a").hover(applyingBestPractices); 
}); 

次數： http://jsfiddle.net/xEvav/1/

// Applying Best Practices 
$(function(){ 
function applyingBestPractices(event) { 

    // Create Vars 
    var clickedClass = $(this).attr('class'); 
    var examples = $(".applying-best-practices .examples"); 
    var links = $(".applying-best-practices .nav a"); 

    // Add Tabindex to all Results 
    examples.each(function(index) { 
     $(this).attr('tabindex', index) 
    }); 

    // Remove class for all 
    examples.removeClass("showIT"); 
    links.removeClass("nav-select"); 

    // Adds active class to link 
    $(this).addClass("nav-select"); 

    // Add Class and Focus 
    $("#" + clickedClass).addClass("showIT").focus(); 
    return false; 
} 
$(".applying-best-practices .nav a").click(applyingBestPractices); 
}); 

Answer 1

這裏是解決方案：

$(function(){ 
    function buildingYourKnowledgeAndSkills(event) { 

     if ($(this).hasClass('nav-select')) { 
      $(".feedback .examples.showIT").focus(); 
     } 
     else { 
      // Create Vars 
      var clickedClass = $(this).attr('class'); 
      var examples = $(".building-your-knowledge-and-skills .examples"); 
      var links = $(".building-your-knowledge-and-skills .nav a"); 

      // Add Tabindex to all Results 
      examples.each(function(index) { 
       $(this).attr('tabindex', index) 
      }); 

      // Remove class for all 
      examples.removeClass("showIT"); 
      links.not(this).removeClass("nav-select"); 

      // Adds active class to link 
      $(this).addClass("nav-select"); 
      $("#" + clickedClass).addClass("showIT").focus(); 
     } 
     return false; 
    } 
    $(".building-your-knowledge-and-skills .nav a").click(buildingYourKnowledgeAndSkills); 
}); 

我只是說這個，如果檢查else語句如果鏈接的類（'nav-選擇'）。

http://jsfiddle.net/xEvav/48/

Answer 2

它不工作的原因是因爲

var clickedClass = $(this).attr('class'); 
... 
$(this).addClass("nav-select"); 

在你加入一個類nav-select

下一次你的資產淨值再次單擊，clickedClass將返回example1 nav-select，因爲你試圖讓現在成爲class="example1 nav-select"

類的屬性，那麼這將失敗：

$("#example1 nav-select").addClass("showIT").focus(); 

解決方案：

http://jsfiddle.net/Azefj/

HTML：個

<a href="javascript:void();" alt="example1">example1</a> 
<a href="javascript:void();" alt="example2">example2</a> 
<a href="javascript:void();" alt="example3">example3</a> 
.... 

JS：

// Create Vars 
var clickedClass = $(this).attr('alt');