[英]JavaScript switch statement that changes image captions in carousel
What I am trying to accomplish here is a carousel that has a centered image and underneath the image, in a separate div outside the carousel, a quote is displayed pertaining to the image that is centered. 我要在此处完成的操作是具有居中图像的轮播,并且在图像下方,在轮播外的单独div中,显示了与居中图像有关的报价。 I'm using 'slick' carousel and the carousel is working fine. 我正在使用“光滑”轮播,轮播工作正常。 The switch statement goes straight through to the default case. switch语句直接进入默认情况。
js file 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 file 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>
the switch
statement is like an if
function. switch
语句就像一个if
函数。 If you want to have captions on all your images, just do the <figure>
in html and use <figcaption>
for each image. 如果要在所有图像上添加字幕,只需在html中执行<figure>
并为每个图像使用<figcaption>
。
To your code, you're basically saying if idArray is equal to this and that
but you aren't going through the array like you would using a for
loop. 对于您的代码,您基本上if idArray is equal to this and that
在说if idArray is equal to this and that
但是您不会像使用for
循环那样遍历数组。 idArray
can never be equal to just idOne
or idTwo
. idArray
永远不能等于idOne
或idTwo
。 idArray[0]
is idOne
, idArray[1]
is idTwo
, etc. idArray[0]
是idOne
, idArray[1]
是idTwo
, idTwo
。
I get you're trying to change the div's content depending on the displayed image. 我发现您正在尝试根据显示的图像更改div的内容。
What you should do is create an array with all the captions like const captionArr = ['caption 1', 'caption 2',...];
您应该做的是创建一个包含所有字幕的数组,例如const captionArr = ['caption 1', 'caption 2',...];
Then, find a way to detect which image is active. 然后,找到一种方法来检测哪个图像处于活动状态。 Take their id, and go, 带他们的身份证去吧,
if(thisID)
is active, then take the corresponding index in captionArr
. if(thisID)
是活动的,则在captionArr
获取相应的索引。 For example, 例如,
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
}
}
I think you should you the Slick events to change the caption. 我认为您应该通过Slick事件来更改字幕。
Your switch
was not a bad idea, even if the same thing could be achieved using an array... 即使使用数组可以实现相同的目的,您的switch
也不是一个坏主意。
The switch
has the advantage of a default
caption. switch
具有default
字幕的优点。
So, using your switch
within a function called on afterChange
, it works. 因此,在名为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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.