如何与下一个和上一个按钮进行 div 比较？答案

【问题标题】：How to make a div comparison with next and previous buttons?如何与下一个和上一个按钮进行 div 比较？
【发布时间】：2020-04-21 05:00:14
【问题描述】：

我正在尝试使用下一个和上一个按钮进行一组 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>

【问题讨论】：

标签： javascript jquery navigation comparison

【解决方案1】：

解决办法如下：

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

});

【讨论】：