如何使Javascript代碼分別對每個元素起作用，以使用相同的Javascript代碼在HTML中創建多個重復項

Question

我創建了一個在我的網站上使用的簡單圖片輪播。

一切正常，直到我只有一個，但是一旦我嘗試創建一個新的，它就無法正常工作。

我需要的是我創建的所有圖像滑塊都彼此獨立。

兩個滑塊應單獨工作。

任何幫助將是非常巨大的。

這是我的代碼：

 //current position var pos = 0; //number of slides var totalSlides = $('.slider-wrap ul li').length; //get the slide width var sliderWidth = $('.slider-wrap').width(); $(document).ready(function(){ /***************** BUILD THE SLIDER *****************/ //set width to be 'x' times the number of slides $('.slider-wrap ul.slider').width(sliderWidth*totalSlides); //next slide $('.next').click(function(){ slideRight(); }); //previous slide $('.previous').click(function(){ slideLeft(); }); /************************* //*> OPTIONAL SETTINGS ************************/ //automatic slider var autoSlider = setInterval(slideRight, 3000); //for each slide $.each($('.slider-wrap ul li'), function() { //set its color var c = $(this).attr("data-color"); $(this).css("background",c); //create a pagination var li = document.createElement('li'); $('.pagination-wrap ul').append(li); }); //counter countSlides(); //pagination pagination(); //hide/show controls/btns when hover //pause automatic slide when hover $('.slider-wrap').hover( function(){ $(this).addClass('active'); clearInterval(autoSlider); }, function(){ $(this).removeClass('active'); autoSlider = setInterval(slideRight, 3000); } ); });//DOCUMENT READY /*********** SLIDE LEFT ************/ function slideLeft(){ pos--; if(pos==-1){ pos = totalSlides-1; } $('.slider-wrap ul.slider').css('left', -(sliderWidth*pos)); //*> optional countSlides(); pagination(); } /************ SLIDE RIGHT *************/ function slideRight(){ pos++; if(pos==totalSlides){ pos = 0; } $('.slider-wrap ul.slider').css('left', -(sliderWidth*pos)); //*> optional countSlides(); pagination(); } /************************ //*> OPTIONAL SETTINGS ************************/ function countSlides(){ $('.counter').html(pos+1 + ' / ' + totalSlides); } function pagination(){ $('.pagination-wrap ul li').removeClass('active'); $('.pagination-wrap ul li:eq('+pos+')').addClass('active'); } 

 /*GLOBALS*/ * { margin: 0; padding: 0; list-style: none; } a { text-decoration: none; color: #666; } a:hover { color: #1bc1a3; } body, hmtl { background: #ecf0f1; font-family: 'Anton', sans-serif; } .wrapper { width: 600px; margin: 50px auto; height: 400px; position: relative; color: #fff; text-shadow: rgba(0, 0, 0, 0.1) 2px 2px 0px; } .slider-wrap { width: 600px; height: 400px; position: relative; overflow: hidden; } .slider-wrap ul.slider { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .slider-wrap ul.slider li { float: left; position: relative; width: 600px; height: 400px; } .slider-wrap ul.slider li > div { position: absolute; top: 20px; left: 35px; } .slider-wrap ul.slider li > div h3 { font-size: 36px; text-transform: uppercase; } .slider-wrap ul.slider li > div span { font-family: Neucha, Arial, sans serif; font-size: 21px; } .slider-wrap ul.slider li i { text-align: center; line-height: 400px; display: block; width: 100%; font-size: 90px; } .object-fit_contain { object-fit: contain; height: auto; max-width: 600px; } /*btns*/ .btns { position: absolute; width: 50px; height: 60px; top: 50%; margin-top: -25px; line-height: 57px; text-align: center; cursor: pointer; z-index: 100; -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; -ms-user-select: none; -webkit-transition: all 0.1s ease; -moz-transition: all 0.1s ease; -o-transition: all 0.1s ease; -ms-transition: all 0.1s ease; transition: all 0.1s ease; } .next { right: -1px; margin-right: 200px; } .previous { left: -1px; margin-left: 200px; } .counter {} .slider-wrap.active .next { right: 0px; } .slider-wrap.active .previous { left: 0px; } /*bar*/ .pagination-wrap { min-width: 20px; margin-top: 350px; margin-left: auto; margin-right: auto; height: 15px; position: relative; text-align: center; } .pagination-wrap ul { width: 100%; } .pagination-wrap ul li { margin: 0 4px; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #3ab8cb; opacity: 0.5; position: relative; top: 0; } .pagination-wrap ul li.active { width: 12px; height: 12px; top: 3px; opacity: 1; box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 0px; } /*Header*/ h1, h2 { text-shadow: none; text-align: center; } h1 { color: #666; text-transform: uppercase; font-size: 36px; } h2 { color: #7f8c8d; font-family: Neucha, Arial, sans serif; font-size: 18px; margin-bottom: 30px; } /*ANIMATION*/ .slider-wrap ul, .pagination-wrap ul li { -webkit-transition: all 0.3s cubic-bezier(1, .01, .32, 1); -moz-transition: all 0.3s cubic-bezier(1, .01, .32, 1); -o-transition: all 0.3s cubic-bezier(1, .01, .32, 1); -ms-transition: all 0.3s cubic-bezier(1, .01, .32, 1); transition: all 0.3s cubic-bezier(1, .01, .32, 1); } 

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- ########################### Slider 1 ##########################--> <div class="slider-wrap"> <ul class="slider"> <li> <img class="object-fit_contain" src="http://www.spiritanimal.info/wp-content/uploads/Lion-Spirit-Animal-1.jpg"> </li> <li> <img class="object-fit_contain" src="https://cdn.images.express.co.uk/img/dynamic/galleries/x701/156708.jpg"> </li> </ul> <!--controls--> <div class="pagination-wrap"> <div class="btns next"><i class="fas fa-greater-than"></i></div> <div class="counter"></div> <div class="btns previous"><i class="fas fa-less-than"></i></div> </div> <!--controls--> </div> <!-- ########################### Slider 2 ##########################--> <div class="slider-wrap"> <ul class="slider"> <li> <img class="object-fit_contain" src="http://www.spiritanimal.info/wp-content/uploads/Lion-Spirit-Animal-1.jpg"> </li> <li> <img class="object-fit_contain" src="https://cdn.images.express.co.uk/img/dynamic/galleries/x701/156708.jpg"> </li> </ul> <!--controls--> <div class="pagination-wrap"> <div class="btns next"><i class="fas fa-greater-than"></i></div> <div class="counter"></div> <div class="btns previous"><i class="fas fa-less-than"></i></div> </div> <!--controls--> </div> 

Answer 1

您有多個具有相同ID的元素。 如果您需要在單個頁面上使用多個類，則需要更新代碼以處理類和“最近”的相關項目。

例如，在您單擊“上一個”的地方，可能需要更改為以下內容：

//previous slide
$('.previous').click(function(event){
    slideLeft(event.target); // to pass the clicked 'previous' button to slideLeft()
});

然后在您的slideLeft（）函數中，找到最靠近單擊按鈕的那個滑塊：

function slideLeft(target){
    pos--;
    if(pos==-1){ pos = totalSlides-1; }
    $(target).closest('.slider').css('left', -(sliderWidth*pos));   // only line I changed in your example

    //*> optional
    countSlides();
    pagination();
}

我沒有完全執行此操作，但是我相信，“知道單擊哪個，然后從那里找到要更新的內容”的概念。