如何基于子元素将类添加到父元素's类使用jQuery

How to add a class to a parent element based on the child's class using jQuery

本文关键字：元素 jQuery 何基于 添加      更新时间：2023-09-26

我正在创建一个标准的jQuery图像幻灯片，但我需要将某个类添加到容器div中，基于当前显示的幻灯片。

我使用的是Flexslider，它为当前幻灯片提供了一类"灵活活动幻灯片"。我想做的是将该类与一个唯一的类结合使用来选择活动幻灯片（即'.heating slide.flex活动幻灯片）。

然后，我想让jQuery根据当前显示的幻灯片，将一个额外的类应用到包含的div（.image slider.full-width）。

例如：

  • 如果正在显示加热幻灯片，我想将一类.加热容器应用于.image-slider.full-widthdiv
  • 如果显示冷却幻灯片，我想应用一类.冷却容器
  • 等等

这是我的代码：

<div class="image-slider full-width">
<div class="image-slider-container">
    <div class="flexslider wide">
        <ul class="slides">
            <li class="cooling-slide">
                <img src="/assets/images/image-slider/slides/cooling-slide.jpg" />
                <div class="flex-caption">
                    <h2 class="">Cooling</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
                    <a class="button" href="#">Find out more</a>
                </div>
            </li>
            <li class="heating-slide">
                <img src="/assets/images/image-slider/slides/heating-slide.jpg" />
                <div class="flex-caption">
                    <h2 class="">Heating</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
                    <a class="button" href="#">Find out more</a>
                </div>
            </li>
            <li class="ventilation-slide">
                <img src="/assets/images/image-slider/slides/ventilation-slide.jpg" />
                <div class="flex-caption">
                    <h2 class="">Ventilation</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
                    <a class="button" href="#">Find out more</a>
                </div>
            </li>
        </ul>
    </div>
</div>
</div>

以下是我在编写所需代码方面的糟糕尝试：

<script type="text/javascript" >
$(document).ready(function () {
    $(".heating-slide.flex-active-slide") SOMETHING HERE (".image-slider.full-width").addClass("heating-container");
});
</script>

如果您能提供任何帮助，我们将不胜感激！

更新

我没有考虑元素上的其他类，还让它删除了之前添加的类，这样你就不会把它们都放在那里：

$(function() {    
    function setContainer() {
        var activeSlide = $(".flex-active-slide");
        var activeSlideClass = activeSlide.attr('class')
                                            .replace('flex-active-slide', '')
                                            .replace("-slide", "-container")
        var slider = activeSlide.closest(".image-slider.full-width");
        var latestClass = slider.data("latest-class");
        if (latestClass) {
            slider.removeClass(latestClass);
        }
        slider.addClass(activeSlideClass)
              .data("latest-class", activeSlideClass);
    }
    $('.flexslider').flexslider({
        animation: "fade",
        controlsContainer: ".flex-container",
        animationSpeed: 800,            //Integer: Set the speed of animations, in milliseconds
        slideshowSpeed: 10000,           //Integer: Set the speed of the slideshow cycling, in milliseconds
        after: function() { setContainer(); } 
    });
    setContainer();
});

您应该能够按原样将其粘贴到代码中，而不是现有的flexslider绑定。

工作Fiddle-http://jsfiddle.net/xt4Ym/3/

相关文章：