親のclassで判断して子要素の表示切替をしたい

  • 解決済 d.w.c

    (@dwc-1)


    6年、 10ヶ月前

    Swiperスライダーでswiper-slideクラスを持つ要素が中央に来た時にそのすぐ後ろにswiper-slide-activeクラスが挿入されるので、それを起点に子要素のaタグの表示/非表示を切り替えたいと考えています。
    下記のように書いてみました。

    html

    <section id="swiper-section">
 <div class="swiper-container">
  <div class="swiper-wrapper">
   <div class="swiper-slide">
    <div style="background: ***;"><a href="***" class="link"><img src="***"></a></div>
   </div>
   <div class="swiper-slide">
    <div style="background: ***;"><a href="***" class="link"><img src="***"></a></div>
   </div>
   <div class="swiper-slide">
    <div style="background: ***;"><a href="***" class="link"><img src="***"></a></div>
   </div>
  </div>
 </div>
</section>

    js

    (function($) {
    
 $(function(){
  if($('#swiper-section').children().hasClass('swiper-slide-active')) {
   $('a.link').removeClass("hide");
  } else {
   $('a.link').addClass("hide");
  }
 });
    
})(jQuery);

    これだと常にすべてのaタグにhideクラスが追加されて非表示になってしまいます。
    どうすればswiper-slide-activeがついている要素下位のaタグのみ表示させ、それ以外の時は非表示にする事ができますか？

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • msio

    (@msio)

    6年、 10ヶ月前

    当該クラス内のAタグを全部非表示にするようにしてswiper-slide-activeのクラスに表示させるようスタイルを記述するのはどうですか？

    LABE

    (@latobeam)

    6年、 10ヶ月前

    $(function(){}) は $(document).ready(function(){}) の略記なので、発火タイミングはDOM構築時のはずです。
    つまり、スライダーなどを触る前に処理が終わってしまうのです。
    そのスライダーは使ったことがないのですが、調べてみると「スライドしたとき」に発火するイベント slideChange があるようなので、そのイベントに .on() すればいけると思います。
    コードは間違ってるかもなので、ご参考まで。

    var mySwiper = new Swiper('.swiper-container', {
});
var mySwiper = documet.querySelector('.swiper-container').swiper;
mySwiper.on('slideChange', function() {
    $('.swiper-container').children('.swiper-slide').each(function() {
        if($(this).hasClass('swiper-slide-active')) {
            $(this).children('.link').removeClass('hide');
        } else {
            $(this).children('.link').addClass('hide');
        }
    });
});
    トピック投稿者 d.w.c

    (@dwc-1)

    6年、 10ヶ月前

    @msio
    jsでの制御をしないといけないと視野が狭くなっていました。
    下記のようにすることで実装できました。ありがとうございました！

    #swiper-section > .swiper-container > .swiper-wrapper > .swiper-slide a.link {
 display: none;
}
#swiper-section > .swiper-container > .swiper-wrapper > .swiper-slide.swiper-slide-active a.link {
 display: block;
}
    トピック投稿者 d.w.c

    (@dwc-1)

    6年、 10ヶ月前

    @latobeam

    swiperのサイトにslideChangeについて書いてありましたね…
    英語サイトなので細かく読み解けていませんでした。

    考えていただいたコードを入れてみたのですが、うまく動きませんでした。
    単純化したコードで質問を書いていますが、実際はswiperを入れ子構造にしているので制御がより複雑になっているのかもしれません。

    本当はswiperで準備されているslideChangeを使いたいのですが、最近のバージョンの記述について説明しているものが見つけられませんでした。
    slideChangeのほうがほかにもいろいろできそうなので出来れば使えるようになりたいのですが、いじってみてもよくわからなかったので今回はcssでの制御にしておきます。

    アドバイスありがとうございました！！

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「親のclassで判断して子要素の表示切替をしたい」には新たに返信することはできません。