0

標準の jQuery 画像スライドショーを作成していますが、現在表示されているスライドに基づいて、特定のクラスをコンテナー div に追加する必要があります。

現在のスライドに「flex-active-slide」のクラスを提供する Flexslider を使用しています。私がやりたいのは、そのクラスを一意のクラスと組み合わせて使用​​して、アクティブなスライドを選択することです (つまり、'.heating-slide.flex-active-slide)。

次に、現在表示されているスライドに基づいて、含まれている div (.image-slider.full-width) に jQuery に追加のクラスを適用させたいと思います。

例えば：

  • 加熱スライドが表示されている場合は、.heating-container のクラスを .image-slider.full-width div に適用したいと思います。
  • 冷却スライドが表示されている場合は、.cooling-container のクラスを適用したいと思います
  • 等々

これが私のコードです：

<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>

あなたが提供できるどんな助けも大歓迎です！

4

1 に答える 1

1

アップデート

私は要素にあった他のクラスを考慮していませんでした。また、以前に追加されたクラスを削除して、そこにそれらすべてが存在しないようにしました:

$(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 バインディングの代わりに、それをそのままコードに貼り付けることができるはずです。

ワーキングフィドル - http://jsfiddle.net/xt4Ym/3/

于 2013-08-20T10:15:21.947 に答える