Question

我已经创建了一个处理某些交互的函数。我正在使用Clicks和Hovers功能。在这个例子中，我将它用于Hovers。它工作得很好，但有一个问题。当您将鼠标悬停在链接上并将鼠标悬停在它上面时，没有任何反应。您必须首先悬停在另一个链接上，然后才能将鼠标悬停回来查看反馈。结果与点击次数相同。如果单击链接。显示反馈，如果再次单击相同的链接，反馈将消失。我已经创建了一个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

它不起作用的原因是因为

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

Answer 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 if语句来检查链接是否有类（'nav-select'）。

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

jQuery Hover / Click函数问题

2 个答案: