jQuery添加和删除类不起作用

Question

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

我已经从codepen.io创建了这个DEMO

因此，您可以在演示中看到一个“ 单击此处”链接。 当您单击链接，然后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

这是因为.buton是其父级的唯一子节点，而.next()将不返回任何内容，如您的标记所示：

<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')上一层，然后选择.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');
  });
});

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

Answer 2

请试试：

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

代替

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

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）实际上比您要选择的元素深一层。