javascript - jquery 添加和删除类不起作用

Question

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

我创建了这个 DEMO 来自 codepen.io

因此您可以在演示中看到有一个单击此处 链接。当您单击链接时，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');
  });
});

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