Question

我正在尝试将一个名为“animated”的类添加到子div中，只有当父li有一个名为“current”的类时。另外，如果父李没有显示“当前”类，我正在尝试删除“动画”类。

$(document).ready(function() {
if ($('ul.itemwrap li').hasClass('current')) {
   $( "ul.itemwrap li" ).find( ".caption-text" ).addClass("animated"); 
    }
else { 
$( "ul.itemwrap li" ).find( ".caption-text" ).removeClass( "animated" );
    }
});

问题* 代码工作，但是，它只是将类添加到所有子（.caption-text）元素，并且在整个轮播循环中添加和删除“当前”类时不删除它们。

HTML * <ul class="itemwrap"> <li class="current"> <img src="images/img1.jpg" alt="img-description"> <div class="caption"> <div class="caption-holder"> <div class="container"> <div class="caption-text"> <h1>title</h1> </div> </div> </div> </div> </li> <li> <img src="images/img2.jpg" alt="img-description"> <div class="caption"> <div class="caption-holder"> <div class="container"> <div class="caption-text"> <h1>Title</h1> </div> </div> </div> </div> </li> <li> <img src="images/img3.jpg" alt="img-description"> <div class="caption"> <div class="caption-holder "> <div class="container"> <div class="caption-text"> <h1>Title></h1> </div> </div> </div> </div> </li> </ul>

Answer 1

您的代码存在的问题是，如果一个<li>拥有类'current'，那么您将动画添加到所有".caption-text"元素的类，而不仅仅是以下的元素'.current'项目。

您可以通过几种方式修复代码。这种方式可以单独处理每个<li>：

$(document).ready(function() {
    $('ul.itemwrap li').each(function() {
        var item = $(this);
        var caption = item.find(".caption-text");
        if (item.hasClass('current')) {
            caption.addClass("animated");
        } else {
            caption.removeClass("animated");
        }
    });
});

这种方式使用选择器为您完成更多工作：

$(document).ready(function() {
    // clear .animated from all captions
    $('ul.itemwrap li .caption-text').removeClass("animated");

    // put back the .animated under .current
    $('ul.itemwrap li.current .caption-text').addClass("animated");
});

如果parent li hasclass将class附加到child元素

1 个答案: