添加链接时 JQuery 停止工作
JQuery stops working when adding link
我正在学习JQuery,并且正在使用JQuery脚本,该脚本在图片中滑动文本:
<script>
$(document).ready(function() {
var currentImg = 1,
totalImages = 4
loopTime = 1000,
intervalId = null;
function displayTitle(imgNbr) {
$('.title').hide();
$('#image'+imgNbr).prev('div').show();
}
$('img').on('mouseover', function() {
clearInterval(intervalId);
displayTitle($(this).parent().attr('id').substring(5));
}).on('mouseout', function() {
currentImg = $(this).parent().attr('id').substring(5);
startLoop();
})
function startLoop() {
intervalId = setInterval(function() {
displayTitle(currentImg);
currentImg = ((currentImg == totalImages) ? 1 : parseInt(currentImg)+1);
}, loopTime);
}
startLoop();
});
</script>
但是当我尝试在 [div] 和图像标签之间添加 [href="#"] 标签时,它会停止工作。你能帮我修复它吗?谢谢。
<div class="imgcontainer">
<div class="title">title 1</div>
<div class="img" id="image1"><a href="#"><img src="images/image1.jpg" /></a></div>
</div>
<div class="imgcontainer">
<div class="title">title 2</div>
<div class="img" id="image2"><a href="#"><img src="images/image2.jpg" /></a></div>
</div>
<div class="imgcontainer">
<div class="title">title 3</div>
<div class="img" id="image3"><a href="#"><img src="images/image3.jpg" /></a></div>
</div>
更改:
displayTitle($(this).parent().attr('id').substring(5));
自:
displayTitle($(this).parents('div').attr('id').substring(5));
jsFiddle 示例。
它停止工作,因为div 不再是前面的同级。 您应该将调用更改为使用 prevAll('div')
来选择与div 选择器匹配的所有先前同级。
prev
函数仅匹配当前元素之前的第一个同级元素,然后仅当它与选择器匹配时才匹配。在本例中,您添加了一个干预元素,即锚标记,因此div 不再是前面的第一个同级,选择器与任何内容都不匹配。 PrevAll
认为前面的所有同级都与选择器匹配。 在您的情况下,只有一个。 如果您进一步更改标记以引入其他div,则必须调整选择器以从集合中选择适当的一个。
function displayTitle(imgNbr) {
$('.title').hide();
$('#image'+imgNbr).prevAll('div').show();
}
相关文章:
- jQuery UI自动完成突然停止工作
- 重新启动jquery脚本后,角度停止工作
- jQuery插件在为元素分配id时停止工作
- Javascript和jQuery在Grails应用程序中停止工作
- 溢出:滚动;jquery在停止工作后一直滚动到某个时刻
- JQuery停止工作,没有任何错误消息
- jQuery$(document).ready突然停止工作
- jquery.nav.js活动部分高亮显示点击后停止工作
- 带有jQuery和YQL的Weather突然停止工作
- 在jQuery.html()更新时,其他函数将停止工作
- jQuery 切换复制停止工作
- 为什么当我使用JQuery DatePicker时,Google Code Prettifier停止工作(反之亦然)
- 停止动画停止工作,jQuery/悬停
- 添加链接时 JQuery 停止工作
- JQuery 函数突然停止工作,转换 Javascript 参数时出错
- jQuery/Javascript似乎停止工作
- jQuery 悬停在几秒钟后停止工作
- 插件在 jQuery 2.2.0 更新后停止工作
- 为什么 $(':radio').change() 在新的 jQuery 中停止工作
- 几天后,昨天停止工作jQuery