所以我試著讓一整組元素繼續前進,我在這里拿了一個代碼,但我編輯了它
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="divs">
<div class="cls1">
<div>Yes 1 </div>
<div>Element 1 </div>
</div>
<div class="cls2">
<div>Yes 1 </div>
<div>Element 1 </div>
</div>
<div class="cls3">
<div>Yes 1 </div>
<div>Element 1 </div>
</div>
</div>
<a id="next">next</a>
<a id="prev">prev</a>
<script>
$(document).ready(function(){
$(".divs div").each(function(e) {
if (e != 0)
$(this).hide();
});
$("#next").click(function(){
if ($(".divs div:visible").next().length != 0)
$(".divs div:visible").next().show().prev().hide();
else {
$(".divs div:visible").hide();
$(".divs div:first").show();
}
return false;
});
$("#prev").click(function(){
if ($(".divs div:visible").prev().length != 0)
$(".divs div:visible").prev().show().next().hide();
else {
$(".divs div:visible").hide();
$(".divs div:last").show();
}
return false;
});
});
</script>
</html>
當我單擊下一步時,什么都沒有顯示。當我發送垃圾郵件時,隨機元素會單獨顯示,我是單擊下一步時顯示的兩個元素。
uj5u.com熱心網友回復:
如果您不使用類,請使用“.divs>div”之類的內容來查明元素,如果不是,子元素將包含在選擇中。
這只是我的喜好,但是如果你編碼,如果意思清楚的話,一行是可以的,但對于這一行來說,它似乎很浪費而且一眼看不清楚。分配給變數也比多次搜索要好。
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="divs">
<div class="item cls1">
<div>Yes 1 </div>
<div>Element 1 </div>
</div>
<div class="item cls2">
<div>Yes 2 </div>
<div>Element 2 </div>
</div>
<div class="item cls3">
<div>Yes 3 </div>
<div>Element 3 </div>
</div>
</div>
<a id="next">next</a>
<a id="prev">prev</a>
<script>
$(document).ready(function(){
$(".divs>div").each(function(e) {
if (e != 0)
$(this).hide();
});
$("#next").click(function(){
const visibleDiv = $(".divs>div:visible");
const nextDiv = visibleDiv.next();
if(nextDiv.length > 0) {
visibleDiv.hide();
nextDiv.show();
}
});
$("#prev").click(function(){
const visibleDiv = $(".divs>div:visible");
const prevDiv = visibleDiv.prev();
if(prevDiv.length > 0) {
visibleDiv.hide();
prevDiv.show();
}
});
});
</script>
</html>
轉載請註明出處,本文鏈接:https://www.uj5u.com/houduan/470151.html
標籤:javascript html jQuery
