jQuery：onClick if else 语句不起作用

Posted 2023-05-08

【中文标题】jQuery：onClick if else 语句不起作用

【英文标题】：jQuery: onClick if else statement not working

【发布时间】：2022-01-16 14:10:01

【问题描述】：

我有一个用于导航的 if/else 语句，当用户单击与 dropdown-toggle 类关联的链接时，会弹出一个子菜单。

dropdown-toggle 类在我们的导航中有多个链接。我只需要针对 1 个而不是全部，这就是我使用 .eq(0) 的原因。

当子菜单出现时，一个名为 open 的新类被注入到父级 <li>。

由于某种原因，我无法让这个if/else 语句完全发挥作用。我有前半部分工作，但没有下半部分。

对于else 部分，我尝试添加如果open 类被注入并添加active-nav-tab 类会发生什么。

active-nav-tab 是用户在当前页面时的状态类。 active-nav-tab 应该在用户仅单击当前页面的dropdown-toggle 以及在子菜单窗口外单击时消失。然后当用户点击带有dropdown-toggle 的导航链接时，active-nav-tab 应该再次出现在当前页面上。希望这是有道理的。我已经在这里待了两天了。

代码如下：

    $('.dropdown-toggle').click(function (e) 
        if ($(this).not('open')) 
        $('.dropdown-toggle').eq(0).removeClass('active-nav-tab');
        alert('test1');
        
        else 
        $('.dropdown-toggle').eq(0).addClass('active-nav-tab');
        alert('test2');
    
);

html

<li>
<a class="link dropdown-toggle active-nav-tab" role="button">
<span class="tab-icon icon-header-language"></span>
<span class="tab-text">Region</span>
</a>
</li>

<li class="open">
<a class="link dropdown-toggle" role="button">
<span class="tab-icon icon-header-language"></span>
<span class="tab-text">Region</span>
</a>
</li>

<li>
<a class="link dropdown-toggle" role="button">
<span class="tab-icon icon-header-language"></span>
<span class="tab-text">Region</span>
</a>
</li>

我不知道我到底错过了什么。任何帮助都将不胜感激。 谢谢！

【问题讨论】：

not('open') 正在使用无效的选择器来查找 <open></open> 元素

@Phil 是的！这就是我想要使用的。写什么最好？

@charlietfl 我不知道。感谢您的澄清。什么是最好的解决方案？

hasClass() 而不是 not() 是你想要的

@Phil 我只是想针对第一个dropdown-toggle 而不是全部。

【参考方案1】：

您可以对代码进行的最快更改以获得您想要的行为是替换

if ($(this).not('open')) 

有

if ($('.dropdown-toggle').eq(0).hasClass('active-nav-tab')) 

但如果不知道您的用例或您有多少“下拉切换”元素，很难说这是否是一个完整的解决方案。

【参考方案2】：

这将处理单击具有“下拉切换”类的第一个元素

$('.dropdown-toggle:first').click(function () 
    $(this).toggleClass("active-nav-tab");
    if ($(this).hasClass("active-nav-tab")) 
        alert ("Tab activated");
     else 
        alert ("Tab deactivated");
    

jQuery 函数 not(selector) 也应该用于枚举对象以过滤它。

【参考方案3】：

这似乎或多或少地解决了我的问题。我看看QA怎么说哈哈 谢谢！

    $('.active-nav-tab').click(function (e) 
        if ($(this).parents().hasClass("open")) 
        $(this).addClass('active-nav-tab');
        alert('activated');
        
        else 
        $(this).removeClass('active-nav-tab');
        alert('deactivated');
    
);

【讨论】：

eq(0) 发生了什么？

@Phil 当我针对 dropdown-toggle 类时，我使用的是 eq(0)。当我在第一个 dropdown-toggle 类将始终保留的其他页面上时，我遇到了问题。我将点击功能切换到目标active-nav-tab，似乎解决了它。总而言之，我需要那个“active-nav-tab”类来停留在当前页面上。那是您解决方案的一部分。再次感谢