JavaScript switch语句，用于更改轮播中的图像标题

Question

我在这里要完成的是一个旋转木马，它有一个居中的图像，在图像下面，在旋转木马外面的一个单独的div中，显示与中心图像有关的报价。我正在使用'光滑'旋转木马，旋转木马工作正常。 switch语句直接进入默认情况。

js file

    (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，但是您不会像使用for循环那样浏览数组。 idArray永远不能仅等于idOne或idTwo。 idArray[0]为idOne，idArray[1]为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，它可以正常工作。

＆＃13;

＆＃13;

$(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");

});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;