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

问题描述 投票:0回答:1

我正在尝试使用下一个和上一个按钮进行div比较。因此,当单击下一个按钮时,“ 1”应与“ A”匹配,“ 2”应与“ B”匹配,依此类推。该代码适用于第一组div,但不适用于应该与之进行比较的一组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个回答
0
投票

这里是解决方法:

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

});
© www.soinside.com 2019 - 2024. All rights reserved.