質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.78%

eachでサムネイルの連番を、各スライドで0から連番をつけたい。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 112

navbisuu

score 2

前提・実現したいこと

eachでサムネイルの連番(index番号)を、各スライドで0から連番をつけたいです。
スライドが1つの場合はうまくいくのですが、
htmlを複製して2つ以上スライドを作成した場合、
各スライドで連番がリセットされず、
index番号(data-index)が5,6,7,8・・・と続きの番号がついてしまいます。

これを各スライドで、サムネイルに0,1,2,3・・・と0から付与したいです。

該当のソースコード

詳細な実装内容ですが、
slickでサムネイル付きのスライド実装をしたいと思っています。
htmlとjavascriptを以下の記述で作成しました。
htmlの記述変更はなしで、
このまま複製しても、javascriptが機能するようにしたいです。

<!--1つのスライド-->
<div class="product-slide">
  <!--メインスライド-->
  <ul class="slide-main">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
  <!--/メインスライド-->
  <!--サムネイルスライド-->
  <ul class="slide-thumbnail">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
  <!--/サムネイルスライド-->
</div>
<!--/1つのスライド-->
  $(function() {
    // slide(サムネイルつき)---------------------
    // 参考サイト:https://takblog.site/web/?p=144
    var sliderBox = ".product-slide";
    var slider = ".slide-main"; //スライダー
    var thumbnailItem = ".slide-thumbnail li"; //サムネイル画像
    //サムネイル画像アイテムに data-index でindex番号を付与
      $(thumbnailItem).each(function() {
        var index = $(thumbnailItem).index(this);
        $(this).attr("data-index", index);
      });
    //スライダー初期化後、カレントのサムネイル画像にクラス「thumbnail-current」を付ける
    //「slickスライダー作成」の前にこの記述は書いてください。
    $(slider).on("init", function(slick) {
      var index = $(".slide-item.slick-slide.slick-current").attr(
        "data-slick-index"
      );
      $(thumbnailItem + '[data-index="' + index + '"]').addClass(
        "thumbnail-current"
      );
    });
    //slickスライダー初期化
    $(".slide-main").slick({
      arrows: true,
      dots: true,
      fade: true,
      infinite: false //これは必須
    });
    //サムネイル画像アイテムをクリックした時にスライダー切り替え
    $(thumbnailItem).on("click", function() {
      var index = $(this).attr("data-index");
      $(slider).slick("slickGoTo", index, false);
    });
    //サムネイル画像のカレントを切り替え
    $(slider).on("beforeChange", function(
      event,
      slick,
      currentSlide,
      nextSlide
    ) {
      $(thumbnailItem).each(function() {
        $(this).removeClass("thumbnail-current");
      });
      $(thumbnailItem + '[data-index="' + nextSlide + '"]').addClass(
        "thumbnail-current"
      );
    });
  });

試したこと

$(this)を使うと解決すると思っているのですが、
うまく使えず、解決できない状態です。
javascriptの記述でアドバイスいただきたいです。
「サムネイル画像アイテムに data-index でindex番号を付与する」ところで、
以下のように指定してみましたが、data-index自体が付与されなくなってしまいました。

    //サムネイル画像アイテムに data-index でindex番号を付与
    $(sliderBox).each(function() {
      $(sliderBox)
        .find(thumbnailItem)
        .each(function() {
          var index = $(sliderBox)
            .find(thumbnailItem)
            .index(this);
          $(this)
            .find(thumbnailItem)
            .attr("data-index", index);
        });
    });


以上となります。お手数おかけしますが、よろしくお願いします。

コメントいただいてから試してみたこと

yambejp様にご教示いただいた方法で
思うようにdata-indexの連番を付けることができました!
しかし、スライドとサムネイルのクラス名が同じだと、
複数増やした状態で、サムネイルをクリックしたら、同時にスライドが動いてしまうことに気付きました。。。
なので、スライドとサムネイルのクラス名を変更する方法で実装を考え直しています。

そこで、javascriptの記述をスライダーの数だけ複製し、
スライダーとサムネイル画像の部分を、
下記のように、変数と中に入れるクラス名を手動で変更したら、うまく起動しました。

    var slider = ".main0"; //スライダー
    var thumbnailItem = ".slide-thumbnail0 li"; //サムネイル画像
    var slider1 = ".main1"; //スライダー
    var thumbnailItem1 = ".slide-thumbnail1 li"; //サムネイル画像


これをfor文を使って動的に変数とクラスの番号を変更したいのですが、うまくいきません。。。
下記のように、クラスの番号を動的に変更するようにしたのですが、
スライドが複数ある場合、
どのサムネイルをクリックしても、一番下のスライドが反応してしまいます。

  $(function() {
    // slide(サムネイルつき)---------------------
    // 参考サイト:https://takblog.site/web/?p=144

    //【追加】スライドの数を数え、その数だけ個別のクラスを付与する
    var classLength = $(".product-slide").length;
    var newClassMain, newClassThumbnail, slider, thumbnailItem;
    //【追加】サムネイル画像アイテムに data-index でindex番号を付与
    for (var i = 0; classLength > i; i++) {
      newClassMain = "main" + i;
      newClassThumbnail = "thumbnail" + i;
      slider = "." + newClassMain;
      thumbnailItem = "." + newClassThumbnail + " " + "li";
      $(".slide-main")
        .eq(i)
        .addClass(newClassMain);
      $(".slide-thumbnail")
        .eq(i)
        .addClass(newClassThumbnail);
      //サムネイル画像アイテムに data-index でindex番号を付与
      $(thumbnailItem).each(function() {
        var index = $(thumbnailItem).index(this);
        $(this).attr("data-index", index);
      });
      //スライダー初期化後、カレントのサムネイル画像にクラス「thumbnail-current」を付ける
      //「slickスライダー作成」の前にこの記述は書いてください。
      $(slider).on("init", function(slick) {
        var index = $(".slide-item.slick-slide.slick-current").attr(
          "data-slick-index"
        );
        $(thumbnailItem + '[data-index="' + index + '"]').addClass(
          "thumbnail-current"
        );
      });
      //slickスライダー初期化
      $(slider).slick({
        arrows: true,
        dots: true,
        fade: true,
        infinite: false //これは必須
      });
      //サムネイル画像アイテムをクリックした時にスライダー切り替え
      $(thumbnailItem).on("click", function() {
        var index = $(this).attr("data-index");
        $(slider).slick("slickGoTo", index, false);
      });
      //サムネイル画像のカレントを切り替え
      $(slider).on("beforeChange", function(
        event,
        slick,
        currentSlide,
        nextSlide
      ) {
        $(thumbnailItem).each(function() {
          $(this).removeClass("thumbnail-current");
        });
        $(thumbnailItem + '[data-index="' + nextSlide + '"]').addClass(
          "thumbnail-current"
        );
      });
    }
  }

そのため、変数名も変更する必要があると考えています。
しかし、slider[i],thumbnailItem[i] ではうまくいきませんでした。。

長文で申し訳ありません。
どうかお力をお借りできれば嬉しいです。
よろしくお願い申し上げます。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

想定する最終形が見えないのでなんとも言えませんがこんな感じですか?

$(function(){
  $('.product-slide li').attr("data-index",function(){
    return $(this).closest('ul').find('li').index(this);
  });
});

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/10/18 18:32 編集

    yambejp様
    ご教示ありがとうございます!
    その方法で思うようにdata-indexの連番を付けることができました!
    しかし、スライドとサムネイルのクラス名が同じだと、
    複数増やした状態で、サムネイルをクリックしたら、同時にスライドが動いてしまうことに気付きました。。。
    なので、スライドとサムネイルのクラス名を変更する方法で実装を考え直しています。

    【追記】
    コードを書いたら長くなってしまいましたので、
    本文に、「コメントいただいてから試してみたこと」に
    ご教示後の試行錯誤内容を追記しました。
    そちらをご確認いただき、コメントいただけると大変有難いです!

    お手数おかけしますが、よろしくお願い申し上げます。

    キャンセル

  • 2020/10/19 11:19

    yambejs様
    すみません、このスライドの問題は、別の方法で解決したのですが、
    表題の質問にはこのご回答内容で解決しましたので、ベストアンサーにしました。
    jQueryの新たな知識を増やすことができました。
    本当にありがとうございました!

    スライド問題の解決方法は、こちらの質問ページで解決しました。
    https://teratail.com/questions/298792

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.78%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る