改變圖片說明輪盤

的JavaScript switch語句我想在這裏完成的是，有一個居中的圖像和圖像的下方，在轉盤之外的單獨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>

來源

2017-04-05 MAS89

'開關（idArray）'是沒有意義的。你有元素，設置他們的標題。 –

我會抓取變量賦值，並嘗試讓你的'case'像這樣：case $（'＃1'）：'另外，什麼是'switch（idArray）'應該做的..？ –

我想你應該改變標題的Slick事件。

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

來源

2017-04-05 19:03:08

這很好，但是當我嘗試parseInt活動類時，它返回NaN。我只是想知道爲什麼它不承認身份證不是一個數字？ – MAS89

我不能說。 Console.log你試圖解析什麼，看看這是什麼。 –

它正在工作，我不得不將.slick-active更改爲.slick-center。非常感謝您的幫助！ :) – MAS89

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

來源

2017-04-05 18:40:41 Rumba

謝謝您的有益反饋，我會稍後再試。 – MAS89

改變圖片說明輪盤

回答

相關問題