如何找到具有匹配数据属性的 div 然后删除类

Posted 2023-05-09

【中文标题】如何找到具有匹配数据属性的 div 然后删除类

【英文标题】：How to find div that has matching data attr then remove class

【发布时间】：2014-06-26 12:21:45

【问题描述】：

这是我的尝试，但似乎不起作用：

$('container').find("[data-slider='" + one + "']").removeClass('hidden');

这是包含在文档中的完整函数。就绪函数

$("#service-icon").on('click', function()

       var $this = $(this);
       event.preventDefault();

       $this.addClass('ease-transition').toggleClass('active-slider-btn');

       $(".page-wrapper").find("[data-slider='" + one + "']").toggleClass("hidden");


 );

我得到的错误是：

"Uncaught ReferenceError: one is not defined"

【问题讨论】：

如果容器是一个类，那应该是$('.container')。如果是id，应该是$('#container')

jQuery how to find an element based on a data-attribute value?的可能重复

我在发布我的问题之前查看了该页面，但这并没有解决我的问题，我也将其更改为 $(".page-wrapper") 而不是 $("container")但是dosent似乎可以解决它，还有其他建议吗？

【参考方案1】：

检查事项：

`container` 是类还是 id？如果是这样，您需要分别添加一个 `.` 或 `#` `.find()` 函数中的表达式返回您所期望的结果

你能发布一个指向 JSFiddle 的链接吗？

I have a working example here 和你的情况类似。

html

<div class="container">
    <div data-slider="1" class="hidden">1</div>
    <div data-slider="2">2</div>
</div>

<button id="show-1">show slider 1</button>

CSS

.hidden 
    display: none;

javascript

var one = "1";

$("#show-1").click(function(e)
    $(".container").find("[data-slider='" + one + "']").removeClass("hidden");
);

【讨论】：

我将其更改为 $('.page-wrapper') 但它仍然无法正常工作，我还能做什么？？

我只是忘了用引号括起来......非常感谢你们所有的帮助我真的很感激

【参考方案2】：

这样的事情必须起作用：

   $('.page-wrapper').find("[data-slider='" + one + "']").removeClass('hidden');

在这里查看它的工作原理：http://jsfiddle.net/sNp7x/2/

也许数据属性也是通过javascript设置的，所以你必须注意时间？！

【讨论】：

我得到的错误是“Uncaught ReferenceError: one is not defined”。我不知道为什么我会收到这个错误......

必须定义一个，如错误所示，如下所示： var one = 'test'; $('.page-wrapper').find("[data-slider='" + one + "']").removeClass('hidden');