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');