jquery 添加和删除 class 不起作用

Question

我有一个关于在 javascript 代码中添加和删除 class 的问题。

我从 codepen.io

创建了这个 DEMO

所以你可以看到在演示中有一个点击这里 link。当你点击 link 然后 jquery 做

$(document).ready(function() {
   $('.buton').click(function (event) {
     event.preventDefault();
       $('.vduzalani').animate({'opacity':'.50'}, 300, 'linear');
       $('.vduzalani').css('display', 'block');
       $(this).next('.yazi-paylas').toggleClass('in');

    })    
 });

那么问题是我想从 .yazi-paylas div 标签中添加一个 .in。我的 javascript 代码

有什么问题

Answer 1

请尝试：

$('.yazi-paylas').toggleClass('in');

而不是

$(this).next('.yazi-paylas').toggleClass('in');

Answer 2

这是因为 .buton 是其父节点的唯一子节点，而 .next() 将 return 什么都没有，如您的标记所示：

<div class="container">
    <div class="buton"><a href="#">Click Here</a></div>
    <!-- .buton is the ony sibling! -->
</div>
<div class="yazi-paylas">ssss</div>
<div class="vduzalani"></div>

您可以使用 .parent('.container')（或只是 .parent()）或 .closest('.container') 上一级，select .container 的直系兄弟：

$(document).ready(function() {
  $('.buton').click(function (event) {
     event.preventDefault();

     // You can use chaining, so you don't have to fetch $('.vduzalani') twice
     $('.vduzalani')
     .animate({'opacity':'.50'}, 300, 'linear')
     .css('display', 'block');

     // Tranverse DOM
     $(this).parent().next('.yazi-paylas').toggleClass('in');
     // or
     // $(this).closest('.container').next('.yazi-paylas').toggleClass('in');
  });
});

在此处查看演示 fiddle：http://jsfiddle.net/teddyrised/0g9385k1/

Answer 3

评估父级以获得 .yazi-paylas 元素。将您的代码更改为：

$(this).parent().next('.yazi-paylas').toggleClass('in');

或者，如果父级无关紧要，只需执行：

 $('.yazi-paylas').toggleClass('in');

Answer 4

尝试用这个替换你的行：

   $(this).parent().next('.yazi-paylas').toggleClass('in');

$(this) 在这种情况下实际上比您尝试 select.

的元素深一层

jquery 添加和删除 class 不起作用

jquery add and remove class not working

javascript

css

jquery