jQuery悬停/单击功能问题

Question

I've created a function to handle some interactions. I'm using the function for Clicks and Hovers. In this instance I'm using it for Hovers. It works great, but with one catch. When you hover off a link and hover back on to it nothing happens. You must first hover onto another link before you can hover back to see the feedback. The outcome is the same with clicks. If you click on link. The feedback is displayed, if you click the same link again, the feedback disappears. I've created a JSFiddle for an example of the hovers and the clicks.

Hovers:

// 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);
});

Clicks: 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

The reason it does not work is because of

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

After you added a class nav-select

The next time you click on the nav again, clickedClass will return example1 nav-select because you are trying to get the attribute of class which now became class="example1 nav-select"

Then this will fail:

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

Solution:

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

Answer 2

Here is the solution:

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

I just added this if else statement to check if the link has the class('nav-select').

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