jQuery 如果 data-id 元素 hasClass 不起作用答案

【问题标题】：jQuery if data-id element hasClass not workingjQuery 如果 data-id 元素 hasClass 不起作用
【发布时间】：2023-03-12 00:07:01
【问题描述】：

我不知道我正在尝试创建的函数是否缺少元素，或者我是否缺少某些内容但我的函数根本不起作用。不确定我是否遗漏了什么或者我没有添加什么。让我知道我提供了 jQuery 和我正在尝试工作的代码的屏幕截图。基本上我想要做的是，如果某个具有数据 ID 的元素具有某个类，那么隐藏某些列表项。

$(function($){
    if( $('.chbs-vehicle[data-id="313"] a').hasClass('chbs-state-selected') ){
        $('ul.chbs-list-reset li(1)').hide();
    }
});

【问题讨论】：

$('ul.chbs-list-reset li(1)') 无效。对 nth-child 或 nth-of-type 使用有效的 css 选择器，或者使用 $('ul.chbs-list-reset li').eq(0)
不起作用。我添加了 $('ul.chbs-list-reset li').eq(0)
您是否尝试过在 if 中放置一个 console.log 来验证它的评估结果是否为真？从您的图片来看应该是这样，但这取决于页面加载时的情况。
是的，我做了，我什至添加了一个警报，但没有弹出任何内容。
chbs-state-selected 类是如何添加的？

标签： javascript jquery wordpress if-statement show-hide

【解决方案1】：

li(1) 不是有效的表达式，您应该使用不同的求值器：

$('ul.chbs-list-reset li:eq(0)')
$('ul.chbs-list-reset li:first-child')
$('ul.chbs-list-reset li').eq(0)

看看这个Demo

如果在页面加载时满足您的条件，它就可以正常工作。但是，如果 chbs-state-selected 类是动态添加的，则需要使用事件处理程序监听该更改。您拥有的脚本不会不断轮询文档以查看 Vehicle 313 的 a 是否具有该类。

根据您的评论，听起来您需要侦听添加 chbs-state-selected 类的相同点击事件。看看这个基本的 Demo。

鉴于此，您不一定需要检查类，只需将 hide/show 函数附加到同一事件即可。但是，如果需要，您可以添加hasClass 支票。

无论如何，它应该在首先添加 chbs-state-selected 的同一个处理程序中

【讨论】：

现在很有意义。我做到了，但仍然没有工作：-/
staging.idgadvertising.com/10milemovers/wp-content/themes/… 只是为了让您可以看到 JS 文件，网页的实际链接是这个 [link]staging.idgadvertising.com/10milemovers/book-now
将我给你的代码粘贴到控制台可以让它工作。请注意，我认为它隐藏了错误的元素，有一些 chbs-list-reset 元素，因此您可能需要使用像 .chbs-booking-extra-list 这样的选择器作为前缀
还是不行。从逻辑上看，看看你在做什么......我知道它应该可以工作，但我不知道为什么
如果我们使用 '.click' 而不是 '.on' 会起作用吗？

【解决方案2】：

可以使用 eq:jquery 函数

 $(function($){
        if( $('.chbs-vehicle[data-id="313"] a').hasClass('chbs-state-selected') ){
            $('ul.chbs-list-reset li:eq(0)').hide();
        }
    });

【讨论】：