我试图实现可重用的html组件（bootstrap modal carousel），因为我大约有9种模态，并且它需要很多代码行。我成功地使用了JS的cloneNode并用3个模态创建了on行的克隆，并将其附加到新部分中，此后主模态什么都不显示。事情是，即使我已经正确设置了所有ID，也只有第一行和第二行在工作第三行，但第三行却没有显示。下面是模式行模板的一个片段
<div class="row uniqueClass">
<div class="col-12 row">
<div class="col-xs-4 col-sm-4 col-md-4 text-center">
<img src='pictures/1.jpg' class = "RowImg1" id="img1" data-toggle="modal" data-target="#firstRowfirstModal" height="300px" width="300px" />
<h1 id="food-type1"></h1>
<div class="modal fade modal-img1" id="firstRowfirstModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-body">
<div id="firstRowfirstCarousel" class="carousel slide carousel-img1" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100 one" src="pictures/1.jpg" alt="First slide">
</div>
<div class="carousel-item two">
<img class="d-block w-100" src="pictures/2.jpg" alt="Second slide">
</div>
<div class="carousel-item three">
<img class="d-block w-100" src="pictures/3.jpg" alt="Third slide">
</div>
<div class="carousel-item four">
<img class="d-block w-100" src="pictures/4.jpg" alt="Third slide">
</div>
<div class="carousel-item five">
<img class="d-block w-100" src="pictures/5.jpg" alt="Third slide">
</div>
<div class="carousel-item six">
<img class="d-block w-100" src="pictures/6.jpg" alt="Third slide">
</div>
<div class="carousel-item seven">
<img class="d-block w-100" src="pictures/7.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev prev1" href="#firstRowfirstCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next next1" href="#firstRowfirstCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 text-center">
<img src='pictures/8.jpg' class="RowImg2" id="img2" data-toggle="modal" data-target="#firstRowSecondModal" height="300px" width="300px" />
<h1 id="food-type2"></h1>
<div class="modal fade modal-img2" id="firstRowSecondModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-body">
<div id="firstRowSecondCarousel" class="carousel slide carousel-img2" data-ride="carousel">
<div class="carousel-inner eigth">
<div class="carousel-item active">
<img class="d-block w-100" src="pictures/8.jpg" alt="First slide">
</div>
<div class="carousel-item nine">
<img class="d-block w-100" src="pictures/9.jpg" alt="Second slide">
</div>
<div class="carousel-item ten">
<img class="d-block w-100" src="pictures/10.jpg" alt="Third slide">
</div>
<div class="carousel-item eleven">
<img class="d-block w-100" src="pictures/11.jpg" alt="Fourth slide">
</div>
<div class="carousel-item twelve">
<img class="d-block w-100" src="pictures/12.jpg" alt="Fifth slide">
</div>
<div class="carousel-item thirteen">
<img class="d-block w-100" src="pictures/13.jpg" alt="Sixth slide">
</div>
<div class="carousel-item fourtheen">
<img class="d-block w-100" src="pictures/14.jpg" alt="Seventh slide">
</div>
</div>
<a class="carousel-control-prev prev2" href="#firstRowSecondCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next next2" href="#firstRowSecondCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 text-center">
<img src='pictures/8.jpg' class="RowImg3" id="img3" data-toggle="modal" data-target="#firstRowThirdModal" height="300px" width="300px" />
<h1 id="food-type3"></h1>
<div class="modal fade modal-img3" id="firstRowThirdModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-body">
<div id="firstRowThirdCarousel" class="carousel slide carousel-img3" data-ride="carousel">
<div class="carousel-inner eigth">
<div class="carousel-item active">
<img class="d-block w-100" src="pictures/15.jpg" alt="First slide">
</div>
<div class="carousel-item nine">
<img class="d-block w-100" src="pictures/16.jpg" alt="Second slide">
</div>
<div class="carousel-item ten">
<img class="d-block w-100" src="pictures/17.jpg" alt="Third slide">
</div>
<div class="carousel-item eleven">
<img class="d-block w-100" src="pictures/18.jpg" alt="Fourth slide">
</div>
<div class="carousel-item twelve">
<img class="d-block w-100" src="pictures/19.jpg" alt="Fifth slide">
</div>
<div class="carousel-item thirteen">
<img class="d-block w-100" src="pictures/20.jpg" alt="Sixth slide">
</div>
<div class="carousel-item fourtheen">
<img class="d-block w-100" src="pictures/21.jpg" alt="Seventh slide">
</div>
</div>
<a class="carousel-control-prev prev3" href="#firstRowThirdCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next next3" href="#firstRowThirdCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
在下面，您将找到我的实现技巧的js：
$(function(){
let x = 1;
var ids = [
{'modalId1': 'firstRowfirstModal', 'carouselId1': 'firstRowfirstCarousel',
'modalId2': 'firstRowSecondModal', 'carouselId2': 'firstRowSecondCarousel',
'modalId3': 'firstRowThirdModal', 'carouselId3': 'firstRowThirdCarousel'},
{'modalId1': 'secondRowFirstModal', 'carouselId1': 'secondRowFirstCarousel',
'modalId2': 'secondRowSecondModal', 'carouselId2': 'secondRowSecondCarousel',
'modalId3': 'secondRowThirdModal', 'carouselId3': 'secondRowThirdCarousel'},
{'modalId1': 'thirdRowFirstModal', 'carouselId1': 'thirdRowFirstCarousel',
'modalId2': 'thirdRowSecondModal', 'carouselId2': 'thirdRowSecondCarousel',
'modalId3': 'thirdRowThirdModal', 'carouselId3': 'thirdRowThirdCarousel'}
]
var titles = [
{'menu1': 'Forretter', 'menu2': 'Futo Maki', 'menu3': 'Hoso Maki'},
{'menu1': 'Kaburimaki', 'menu2': 'Nigiri', 'menu3': 'Sashimi'},
{'menu1': 'Ura Maki', 'menu2': 'Sushi Box', 'menu3': 'Sushi Menuer'}
]
var target = document.getElementById('model-target');
var tmpl = document.querySelector('.uniqueClass');
for(let i = 0; i < ids.length ; i++){
var id = ids[i];
var title = titles[i]
let img = x, img2 = img + 7, img3 = img2 + 7;
tmpl.querySelector('.RowImg1').dataset.target = '#' + id.modalId1;
tmpl.querySelector('.RowImg1').src = 'pictures/' + img + '.jpg';
tmpl.querySelector('.modal-img1').id = id.modalId1;
tmpl.querySelector('.carousel-img1').id = id.carouselId1;
tmpl.querySelector('.prev1').href = '#' + id.carouselId1;
tmpl.querySelector('.next1').href = '#' + id.carouselId1;
tmpl.querySelector('#food-type1').innerText = title.menu1;
tmpl.querySelector('.RowImg2').dataset.target = '#' + id.modalId2;
tmpl.querySelector('.RowImg2').src = 'pictures/' + img2 + '.jpg';
tmpl.querySelector('.modal-img2').id = id.modalId2;
tmpl.querySelector('.carousel-img2').id = id.carouselId2;
tmpl.querySelector('.prev2').href = '#' + id.carouselId2;
tmpl.querySelector('.next2').href = '#' + id.carouselId2;
tmpl.querySelector('#food-type2').innerText = title.menu2;
tmpl.querySelector('.RowImg3').dataset.target = '#' + id.modalId3;
tmpl.querySelector('.RowImg3').src = 'pictures/' + img3 + '.jpg';
tmpl.querySelector('.modal-img3').id = id.modalId3;
tmpl.querySelector('.carousel-img3').id = id.carouselId3;
tmpl.querySelector('.prev3').href = '#' + id.carouselId3;
tmpl.querySelector('.next3').href = '#' + id.carouselId3;
tmpl.querySelector('#food-type3').innerText = title.menu3;
target.appendChild(tmpl.cloneNode(true));
//appending each copy to the target section
x = img3+7;
}
})
所以我的问题是，循环随着第三行到达第三次迭代。第一个和第二个按其应有的方式工作。如果还有其他方法可以实现这些代码重用，我很乐意听到您的想法。谢谢