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語句就像一個if函數。 如果要在所有圖像上添加字幕，只需在html中執行<figure>並為每個圖像使用<figcaption> 。

對於您的代碼，您基本上if idArray is equal to this and that在說if idArray is equal to this and that但是您不會像使用for循環那樣遍歷數組。 idArray永遠不能等於idOne或idTwo 。 idArray[0]是idOne ， idArray[1]是idTwo ， idTwo 。

我發現您正在嘗試根據顯示的圖像更改div的內容。

您應該做的是創建一個包含所有字幕的數組，例如const captionArr = ['caption 1', 'caption 2',...];

然后，找到一種方法來檢測哪個圖像處於活動狀態。 帶他們的身份證去吧，

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

Answer 2

我認為您應該通過Slick事件來更改字幕。

即使使用數組可以實現相同的目的，您的switch也不是一個壞主意。
switch具有default字幕的優點。

因此，在名為afterChange的函數中使用switch afterChange正常工作。

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