如何将div与下一个和上一个按钮进行比较



我正在尝试与下一个和上一个按钮进行div比较。因此,当点击下一个按钮时,"1"应该与"A"匹配,"2"与"B"匹配,依此类推。该代码适用于第一组div,但不适用于要与之进行比较的集合。我需要添加什么才能使其工作?

$(document).ready(function() {
	$(".alldivsSet1 div").each(function(e) {
		if (e != 0)
			$(this).hide();
	});

	$(".alldivsSet2 div").each(function(e) {
		if (e != 0)
			$(this).hide();
	});
	$("#next").click(function() {
		if ($(".alldivsSet1 div:visible").next().length != 0)
			$(".alldivsSet1 div:visible").next().show().prev().hide();
		else {
			$(".alldivsSet1 div:visible").hide();
			$(".alldivsSet1 div:first").show();
		}
		return false;
	});
	$("#prev").click(function() {
		if ($(".alldivsSet1 div:visible").prev().length != 0)
			$(".alldivsSet1 div:visible").prev().show().next().hide();
		else {
			$(".alldivsSet1 div:visible").hide();
			$(".alldivsSet1 div:last").show();
		}
		return false;
	});
});
body {
font-family:arial;
}
div {
margin:0 0 40px 0;
}
a {
padding:10px 20px;
border:1px solid black;
background-color:#ddd;
font-weight:bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="alldivsSet1">
	<div class="slide1"><b>COMPARISON 1</b> Lorem Ipsum</div>
	<div class="slide2"><b>COMPARISON 2</b> Lorem Ipsum</div>
	<div class="slide3"><b>COMPARISON 3</b> Lorem Ipsum</div>
	<div class="slide4"><b>COMPARISON 4</b> Lorem Ipsum </div>
	<div class="slide5"><b>COMPARISON 5</b> Lorem Ipsum</div>
	<div class="slide6"><b>COMPARISON 6</b> Lorem Ipsum</div>
</div>
<div class="alldivsSet2">
	<div class="slide1"><b>COMPARISON A</b> Ipsum Lorem</div>
	<div class="slide2"><b>COMPARISON B</b> Ipsum Lorem</div>
	<div class="slide3"><b>COMPARISON C</b> Ipsum Lorem</div>
	<div class="slide4"><b>COMPARISON D</b> Ipsum Lorem</div>
	<div class="slide5"><b>COMPARISON E</b> Ipsum Lorem</div>
	<div class="slide6"><b>COMPARISON F</b> Ipsum Lorem</div>
</div>
<a id="prev">PREV</a>
<a id="next">NEXT</a>

以下是解决方案:

$(document).ready(function() {
$(".alldivsSet1 div").each(function(e) {
if (e != 0)
$(this).hide();
});
$(".alldivsSet2 div").each(function(e) {
if (e != 0)
$(this).hide();
});
$("#next").click(function() {
if ($(".alldivsSet1 div:visible, .alldivsSet2 div:visible").next().length != 0)
$(".alldivsSet1 div:visible, .alldivsSet2 div:visible").next().show().prev().hide();
else {
$(".alldivsSet1 div:visible, .alldivsSet2 div:visible").hide();
$(".alldivsSet1 div:first, .alldivsSet2 div:first").show();
}
return false;
});
$("#prev").click(function() {
if ($(".alldivsSet1 div:visible, .alldivsSet2 div:visible").prev().length != 0)
$(".alldivsSet1 div:visible, .alldivsSet2 div:visible").prev().show().next().hide();
else {
$(".alldivsSet1 div:visible, .alldivsSet2 div:visible").hide();
$(".alldivsSet1 div:last, .alldivsSet2 div:last").show();
}
return false;
});
});

相关内容

  • 没有找到相关文章

最新更新