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');

    })    
 });

然后问题是我要从.in .yazi-paylas标记添加div。我的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）在这种情况下实际上比你想要选择的元素深一级。

jquery添加和删除类不起作用

4 个答案: