jQuery悬停/单击功能问题答案

【问题标题】：jQuery Hover/Click function issuejQuery悬停/单击功能问题
【发布时间】：2013-03-01 19:17:07
【问题描述】：

我创建了一个函数来处理一些交互。我正在使用点击和悬停的功能。在这种情况下，我将它用于悬停。它工作得很好，但有一个问题。当您将鼠标悬停在链接上并重新悬停在该链接上时，什么也没有发生。您必须先将鼠标悬停在另一个链接上，然后才能将鼠标悬停回来查看反馈。结果与点击相同。如果你点击链接。显示反馈，如果再次单击同一链接，则反馈消失。我为悬停和点击的示例创建了一个 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);
});

【问题讨论】：

标签： jquery function click hover

【解决方案1】：

它不起作用的原因是因为

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

【讨论】：

除了使用“alt”没有别的办法
是否可以去掉“nav-select”，然后执行剩下的功能。

【解决方案2】：

解决办法如下：

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

我刚刚添加了这个 if else 语句来检查链接是否有类（'nav-select'）。

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

【讨论】：