如何解决为什么show方法在jQuery中不起作用?
我正在尝试使用仅包含3张图片的jQuery代码创建一个非常简单的幻灯片。
我使用next()
方法显示下一张图像。这是应该如何工作的:
当您单击链接(class="next"
)时,将调用一个方法,该方法隐藏当前图像并显示下一个图像,并向计数器(i
)加1,除非第三个图像。然后,它隐藏当前图像并显示第一张图像(id="first"
)。
单击第一张或第二张图片即可正常工作,但单击第三张图片时,它只是隐藏当前图片,但不显示第一张图片。
var a = new Array();
$("#slideShow").children().first().show();
$("#slideShow").children().first().next().hide();
$("#slideShow").children("div").last().hide();
var i = 0
$(".next").click(function() {
if (i == 2) {
$(this).parent().hide();
$("#first").show();
i = 0;
} else {
$(this).hide();
$(this).siblings().hide();
$(this).parent().next().show();
i++;
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id=slideShow>
<div id="first">
<img src="https://i.stack.imgur.com/XZ4V5.jpg">
<a class="prev">❮</a>
<a class="next">❯</a>
</div>
<div>
<img src="https://i.stack.imgur.com/7bI1Y.jpg">
<a class="prev">❮</a>
<a class="next">❯</a>
</div>
<div>
<img src="https://i.stack.imgur.com/lxthA.jpg">
<a class="prev">❮</a>
<a class="next">❯</a>
</div>
</div>
这些是我尝试过的一些方法:
- 在jQuery中使用
css({"display":"block"})
代替show()
- 使用Javascript语法而不是jQuery:
document.getElementById("first").show();
- 遍历而不是使用id:
$(this).parent().parent().show;
但是这些都不起作用。
解决方法
当您隐藏幻灯片div的内容,然后尝试在幻灯片div上调用show()
而不是其内容时,您的逻辑并不正确。
一种更好的方法是使用一个类来跟踪活动幻灯片,并在单击按钮时移到next()
上:
let $slides = $('#slideShow > div');
$(".next").click(function() {
let $current = $slides.filter('.active').removeClass('active');
let $target = $current.next('div');
if (!$target.length)
$target = $slides.first();
$target.addClass('active');
})
#slideShow > div {
display: none;
}
#slideShow div.active {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slideShow">
<div class="active">
Screen 1
<img src="img\Screenshot (1).png">
</div>
<div>
Screen 4
<img src="img\Screenshot (4).png">
</div>
<div>
Screen 15
<img src="img\Screenshot (15).png">
</div>
<a class="prev">❮</a>
<a class="next">❯</a>
</div>
,
问题是您show()
是父母<div>
,但您也是hide()
<img>
/ <a>
的孩子,却再也show()
个孩子
删除:
$(this).hide();
$(this).siblings().hide();
并添加:
$(this).parent().hide();
那你应该没事。在不更改任何其他逻辑的情况下,这给出了:
var a = new Array();
//$("#slideShow").children().first().show();
//$("#slideShow").children().first().next().hide();
//$("#slideShow").children("div").last().hide();
$("#slideShow>div").hide().first().show();
var i = 0
$(".next").click(function() {
if (i == 2) {
$(this).parent().hide();
$("#first").show();
i = 0;
} else {
//$(this).hide();
//$(this).siblings().hide();
$(this).parent().hide();
$(this).parent().next().show();
i++;
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id=slideShow>
<div id="first">
<img src="https://i.stack.imgur.com/XZ4V5.jpg" width=200>
<a class="prev">❮</a>
<a class="next">❯</a>
</div>
<div>
<img src="https://i.stack.imgur.com/7bI1Y.jpg" width=200>
<a class="prev">❮</a>
<a class="next">❯</a>
</div>
<div>
<img src="https://i.stack.imgur.com/lxthA.jpg" width=200>
<a class="prev">❮</a>
<a class="next">❯</a>
</div>
</div>
,
我会推荐SwiperJS
但是,这可能是解决问题的快速方法
$(".prev").click(function() {
//go to previous slide
var activeSlide = $("div.active"),previousSlide = activeSlide.prev()
//check if there is previous slide
if (previousSlide.length !== 0) {
activeSlide.removeClass("active")
previousSlide.addClass("active")
} else {
alert("there is no previous slide!")
}
})
$(".next").click(function() {
//go to next slide
var activeSlide = $("div.active"),nextSlide = activeSlide.next()
//check if there is next slide
if (nextSlide.length !== 0) {
activeSlide.removeClass("active")
nextSlide.addClass("active")
} else {
alert("there is no next slide!")
}
})
#slideShow > div{
display:none;
overflow:hidden;
height:120pt;
width:250pt;
}
#slideShow > div img{
width:100%;
}
#slideShow > div.active{
display:block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id=slideShow>
<div class="active">
<img src="img\Screenshot (1).png" alt="slide1">
</div>
<div>
<img src="img\Screenshot (4).png" alt="slide 2">
</div>
<div>
<img src="img\Screenshot (15).png" alt="slide 3">
</div>
</div>
<a class="prev">❮</a>
<a class="next">❯</a>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。