javascript - 如何使 Javascript 代码分别为每个元素工作，以使用相同的 Javascript 代码在 HTML 中创建多个副本

Question

我创建了一个简单的图像轮播，我正在我的网站上使用。

一切正常，直到我只有一个，但一旦我尝试创建一个新的，它就无法正常工作。

我所需要的只是我创建的所有图像 slider 都相互独立。

两个 slider 应该单独工作。

任何帮助都会非常有用。

这是我的代码:

//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() 函数中，找到最接近点击按钮的 slider :

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();
}

我没有完全运行它，但我相信“知道点击了哪个，然后从那里找到要更新的内容”的概念就是您想要的。