时间戳

首页 > 解决方案 > 仅获取单击的 div 元素的子元素

javascript - 仅获取单击的 div 元素的子元素

问题描述

所以我正在构建这个网页，并且我有一些用于在 div 中打开模式的幻灯片的照片。我想获得所有点击 div 的孩子（myModal）。我想获取所有具有“mySlides”类的 div，它们是具有“myModal”类的单击 div 的子级。这是我的代码：

var slideIndex = 1;
    showSlides(slideIndex);

    function plusSlides(n) {
    	showSlides(slideIndex += n);
    }

    function currentSlide(n) {
    	showSlides(slideIndex = n);
    }

    function showSlides(n) {
    	var i;
    	var slides = document.getElementsByClassName("mySlides");
    	console.log(slides);
    	var dots = document.getElementsByClassName("dot1");
    	if (n > 3) {
    		slideIndex = 1;
    	}
    	if (n < 1) {
    		slideIndex = slides.length;
    	}
    	for (i = 0; i < slides.length; i++) {
    		slides[i].style.display = "none";  
    	}
    	for (i = 0; i < dots.length; i++) {
    		dots[i].className = dots[i].className.replace(" active1", "");
    	}
    	slides[slideIndex-1].style.display = "block";  
    	dots[slideIndex-1].className += " active1";
    }
<!-- reference item -->
    <div class="grid-item set-bg osobj" data-setbg="img/portfolio/2.jpg">
    	<a class="myBtn" onclick="getSlides()"></a>
    	<div class="myModal modal1">

    		<!-- Modal content -->
    		<div class="modal1-content">
    		  <span class="close1">&times;</span>
    		  <h2>smth</h2>
    		  <div class="post1-container">
    			<div class="post1-thumb">

    				<div class="slideshow1-container">
    					<div class="mySlides">
    						<div class="numbertext">1 / 3</div>
    						<img src="img/portfolio/3.jpg" style="width: 550px; height: 450px;">
    						<div class="text1">Opis slike1</div>
    					</div>
    					
    					<div class="mySlides">
    						<div class="numbertext">2 / 3</div>
    						<img src="img/portfolio/4.jpg" style="width: 550px; height: 450px;">
    						<div class="text1">Opis Slike2</div>
    					</div>
    					
    					<div class="mySlides">
    						<div class="numbertext">3 / 3</div>
    						<img src="img/portfolio/6.jpg" style="width: 550px; height: 450px;">
    						<div class="text1">Opis Slike3</div>
    					</div>
    					
    					<button class="prev1" onclick="plusSlides(-1)">&#10094;</button>
    					<button class="next1" onclick="plusSlides(1)">&#10095;</button>
    					
    					</div>
    					<br>
    					
    					<div style="text-align:center">
    						<span class="dot1" onclick="currentSlide(1)"></span> 
    						<span class="dot1" onclick="currentSlide(2)"></span> 
    						<span class="dot1" onclick="currentSlide(3)"></span> 
    					</div>	
    			</div>
    			</div>
    		</div>
    	  
    	  </div>
    </div>

我尝试使用 $(this).children 但没有这样的运气：

function getSlides() {
    var slides1 = $(this).children('img').attr('src');
    console.log(slides1);
}

我怎样才能做到这一点？我的页面中有多个参考项目，所有参考项目都有不同的 3 个图像以在模式打开时显示。但我只想选择那些是单击元素的子元素（因为现在它返回我所有的“mySlides”div）。

标签： javascriptjqueryhtml

解决方案

您可以onclick="getSlides()"从 DOM 中删除并使用此 Jquery

$('.myBtn').off().on('click',function(){
$(this).next('.myModal').find('.mySlides').each(function(i,v){
    console.log($(v)[0].outerHTML);
   });
});

推荐阅读