カルーセルのイメージキャプションを変更するJavaScript switchステートメント

Question

私がここで達成しようとしているのは、カルーセルの外側にある別のdivにイメージの中心にイメージがあるカルーセルです。中心に置かれた。私は「滑らかな」カルーセルを使用しており、カルーセルは正常に動作しています。 switch文は、デフォルトの場合にまっすぐに進みます。

JSが

(function ($) { 
     'use strict'; 
     $(document).ready(function() { 
      var $idOne = document.getElementById('1'), 
       $idTwo = document.getElementById('2'), 
       $idThree = document.getElementById('3'), 
       $idFour = document.getElementById('4'), 
       $idFive = document.getElementById('5'), 
       $idSix = document.getElementById('6'), 
       $idSeven = document.getElementById('7'), 
       $idEight = document.getElementById('8'), 
       $idNine = document.getElementById('9'), 
       idArray = [ 
        $idOne, $idTwo, $idThree, $idFour, $idFive, $idSix, $idSeven, $idEight, $idNine 
       ]; 

      switch (idArray) { 
      case $idOne: 
       $('#imageCaptions').html("this is image one's caption"); 
       break; 
      case $idTwo: 
       $('#imageCaptions').html("this is image two's caption"); 
       break; 
      case $idThree: 
       $('#imageCaptions').html("this is image three's caption"); 
       break; 
      case $idFour: 
       $('#imageCaptions').html("this is image four's caption"); 
       break; 
      case $idFive: 
       $('#imageCaptions').html("this is image five's caption"); 
       break; 
      case $idSix: 
       $('#imageCaptions').html("this is image six's caption"); 
       break; 
      case $idSeven: 
       $('#imageCaptions').html("this is image seven's caption"); 
       break; 
      case $idEight: 
       $('#imageCaptions').html("this is image eight's caption"); 
       break; 
      case $idNine: 
       $('#imageCaptions').html("this is image nine's caption"); 
       break; 
      default: 
       $('#imageCaptions').html("sorry"); 
       break;   
      } 
     }); 

    })(jQuery); 

htmlファイル

<div id="new"> 
     <div class="center"> 

     <div id="1"> 
      <img src="http://placehold.it/350x300?text=1" class="img-responsive"> 
     </div> 

     <div id="2"> 
      <img src="http://placehold.it/350x300?text=2" class="img-responsive"> 
     </div> 

     <div id="3"> 
      <img src="http://placehold.it/350x300?text=3" class="img-responsive"> 
     </div> 

     <div id="4"> 
      <img src="http://placehold.it/350x300?text=4" class="img-responsive"> 
     </div> 

     <div id="5"> 
      <img src="http://placehold.it/350x300?text=5" class="img-responsive"> 
     </div> 

     <div id="6"> 
      <img src="http://placehold.it/350x300?text=6" class="img-responsive"> 
     </div> 

     <div id="7"> 
      <img src="http://placehold.it/350x300?text=7" class="img-responsive"> 
     </div> 

     <div id="8"> 
      <img src="http://placehold.it/350x300?text=8" class="img-responsive"> 
     </div> 

     <div id="9"> 
      <img src="http://placehold.it/350x300?text=9" class="img-responsive"> 
     </div> 
     </div> 

     <div id="imageCaptions"> 

     </div> 

    </div> 

Answer 1

私はあなたがキャプションを変更するためにあなたにすべきだと思います。あなたのswitch

は同じことが...
switchがdefaultキャプションの利点を持っているアレイを使用して達成することができた場合でも、悪い考えではありませんでした。

afterChangeという名前の関数内でswitchを使用すると、それは機能します。

$(document).ready(function() { 
 

 
    // Slick init 
 
    $('.center').slick({ 
 
    infinite: true, 
 
    autoplay:true 
 
    }); 
 

 
    // Function to be executed on Slick "afterChange" event 
 
    $('.center').on("afterChange",function(event, slick, direction){ 
 
    
 
    // get the "slick-active" id 
 
    var imageId = parseInt($(".slick-active").attr("id")); 
 
    //console.log(imageId); 
 

 
    switch (imageId) { 
 
     case 1: 
 
     $('#imageCaptions').html("this is image one's caption"); 
 
     break; 
 
     case 2: 
 
     $('#imageCaptions').html("this is image two's caption"); 
 
     break; 
 
     case 3: 
 
     $('#imageCaptions').html("this is image three's caption"); 
 
     break; 
 
     case 4: 
 
     $('#imageCaptions').html("this is image four's caption"); 
 
     break; 
 
     case 5: 
 
     $('#imageCaptions').html("this is image five's caption"); 
 
     break; 
 
     case 6: 
 
     $('#imageCaptions').html("this is image six's caption"); 
 
     break; 
 
     case 7: 
 
     $('#imageCaptions').html("this is image seven's caption"); 
 
     break; 
 
     case 8: 
 
     $('#imageCaptions').html("this is image eight's caption"); 
 
     break; 
 
     case 9: 
 
     $('#imageCaptions').html("this is image nine's caption"); 
 
     break; 
 
     default: 
 
     $('#imageCaptions').html("sorry"); 
 
     break;   
 
        } 
 
    }); 
 

 
    // For the first caption to be displayed on load 
 
    $(".center").trigger("afterChange"); 
 

 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script> 
 

 
<div id="new"> 
 
    <div class="center"> 
 

 
    <div id="1"> 
 
     <img src="http://placehold.it/350x300?text=1" class="img-responsive"> 
 
    </div> 
 

 
    <div id="2"> 
 
     <img src="http://placehold.it/350x300?text=2" class="img-responsive"> 
 
    </div> 
 

 
    <div id="3"> 
 
     <img src="http://placehold.it/350x300?text=3" class="img-responsive"> 
 
    </div> 
 

 
    <div id="4"> 
 
     <img src="http://placehold.it/350x300?text=4" class="img-responsive"> 
 
    </div> 
 

 
    <div id="5"> 
 
     <img src="http://placehold.it/350x300?text=5" class="img-responsive"> 
 
    </div> 
 

 
    <div id="6"> 
 
     <img src="http://placehold.it/350x300?text=6" class="img-responsive"> 
 
    </div> 
 

 
    <div id="7"> 
 
     <img src="http://placehold.it/350x300?text=7" class="img-responsive"> 
 
    </div> 
 

 
    <div id="8"> 
 
     <img src="http://placehold.it/350x300?text=8" class="img-responsive"> 
 
    </div> 
 

 
    <div id="9"> 
 
     <img src="http://placehold.it/350x300?text=9" class="img-responsive"> 
 
    </div> 
 
    </div> 
 

 
    <div id="imageCaptions"> 
 

 
    </div> 
 

 
</div>

Answer 2

ファイルswitch文はif機能のようなものです。すべての画像にキャプションを付ける場合は、<figure>をhtmlにして、それぞれの画像に<figcaption>を使用してください。

コードには、基本的にはif idArray is equal to this and thatと表示されていますが、forというループを使用した場合のように配列を経由していません。 idArrayは、決してidOneまたはidTwoと等しくなることはありません。 idArray[0]はidOne、idArray[1]はidTwoなどです。

表示される画像に応じてdivのコンテンツを変更しようとしています。あなたは何をすべき

はアクティブになっている画像を検出する方法を見つけること、そして、 const captionArr = ['caption 1', 'caption 2',...];

のようなすべてのキャプションを持つ配列を作成することです。彼らのIDを持って行くと、

if(thisID)がアクティブである、そしてcaptionArrで対応するインデックスを取る。 たとえば、

let activeID = activeElement.id; //take active element's id 
for(let i = 0; i < captionArr.length; i++) { //go through array 
    if(activeID = i + 1) { //since your ids start with 1 and arrays with 0. 
    $('#imageCaptions').html = captionArr[i]; //change div content 
    } 
}