Javascript 我不确定我是把悬停搞砸了还是搞糟了

好的，就像我一直认为的那样，这应该是可行的，但我对javascript是新手，并且同时尝试了很多东西。这是一个导航栏，当单击或将鼠标悬停在导航栏上时，可以在更改导航颜色的同时显示和隐藏div。嗯，它不做最后一部分。活动ID是当前显示的ID。对不起，我现在不简单了

$(function () {
    var active;

    $('.selection').hide();
    $('#homeDiv').show();

    $('.navlink').hover(

    function () {
        $(this).css("color", "#806ac7");
    },

    function () {
        if ($(this == active)) {
            $(this).css("color", "#961014");
        } else {
            $(this).css("color", "#000000");
        }
    });
    $('.navLink').click(function (e) {
        active == $(this);
        $('.navLink').css("color", "#000000");
        $(this).css("color", "#961014");
        $('.selection').hide();
        $('#' + this.id + 'Div').show();
    });
});

---

似乎您将右括号放错了这一行：

if（$（this==active））

。如果（this==active）

---

另外，您正在编写一个布尔值，而不是设置一个变量：

active==$（this）

它应该是

active=this
除了我在问题下的注释中提到的内容之外，您还需要存储元素，而不是jQuery对象，并用于比较元素

如果您尝试比较对
$（this）
的不同调用的结果，它将始终为
false
，因为它们是唯一的对象

$(function () {
    var active;

    $('.selection').hide();
    $('#homeDiv').show();

    $('.navlink').hover(

    function () {
        $(this).css("color", "#806ac7");
    },

    function () {
           // RIGHT HERE, compare the element
        if (this === active) {
            $(this).css("color", "#961014");
        } else {
            $(this).css("color", "#000000");
        }
    });
    $('.navLink').click(function (e) {

        // RIGHT HERE, store the element
        active = this;

        $('.navLink').css("color", "#000000");
        $(this).css("color", "#961014");
        $('.selection').hide();

         // Lowercase "D" in "div", and improved DOM selection
        $(this).find('div').show();
    });
});

我认为做你想做的最好的方法是，当用户点击你的导航项目时添加一个类。在悬停处理程序中，检查类并相应地更改颜色。或者，您可以简单地使用css中的“重要”来设置活动颜色，这样您就不需要在悬停中检查活动

$('.navLink').click(function (e) {
    var $this = $(this);
    $this.addClass('open').css("color", "#961014");
    $('.navLink').css("color", "#000000");
    $('.selection').hide();
    $('#' + this.id + 'Div').show();
});

$('.navlink').hover(

function () {
    $(this).css("color", "#806ac7");
},

function () {
    var $this = $(this);
    if ($this.hasClass('open') {
        $this.css("color", "#961014");
    } else {
        $this.css("color", "#000000");
    }
});

上面的解决方案是使用jquery来更改css颜色，但是您可以在css中轻松地进行更改。假设其余的代码都能正常工作

$(function () {
    var active;

    $('.selection').hide();
    $('#homeDiv').show();

    $('.navLink').hover(

    function () {
        $(this).css("color", "#806ac7");
    },

    function () {
        if (active == this || active == undefined) {
            $(this).css("color", "#961014");
        } else {
            $(this).css("color", "#000000");
        }
    });
    $('.navLink').click(function (e) {
        active = this;
        $('.navLink').css("color", "#000000");
        $(this).css("color", "#961014");
        $('.selection').hide();
        $('#' + this.id + 'Div').show();
    });
});

如果（$（this==active））{
那么……您正在将一个布尔值传递给
jQuery（）
，它将返回一个始终为“truthy”的对象。在您的单击事件中
active==$（此）
等同于
false
，然后对
false
执行任何操作
活动
仍然
未定义
而且，没有理由执行
$（'#'+this.id+'Div'）。show（）
，只要执行
$（此操作即可）。查找（'Div'）。show（）；
（还要注意
Div中的小写
d
）。存储jquery对象没有明显的错误。可能没有那么好的性能。active==this；它不应该是active=this吗？
active==this；
应该是
active=this；
@Kostia:除了它被用于与另一个函数中的
this
进行比较之外。如果我们存储jquery对象，它永远不会ompare与不同的jQuery对象相同。我们需要在比较之前提取元素。@Huangism:是的，谢谢。没有注意到问题中的错误。您的
==
比较将始终是
false
，因为对象是基于标识进行比较的，所以
$（此）==active
将始终比较两个不同的对象。@CrazyTrain touche。不知何故认为jquery将缓存选择器。它确实将元素存储在索引
0
，因此您可以执行
$（此）[0]==活动的
，但随后您将创建一个jQuery对象，并立即将其丢弃。但是，
==
只是将它们视为对象，并检查它们是否是同一个对象。我比javascript了解更多CSS，所以我先尝试了一下。问题是“活动”选择器仅适用于链接，而不是li，至少据我所知ledge@user2428881我的解决方案根本不涉及：active选择器，而是添加了一个名为active的类，当然，您可以更改为任何您想要的。您可以在活动类上定义重要的css，而不是：active。我会将其更改为不太容易混淆的内容。将active更改为open，这只是一个css类