jQuery -在点击一定次数后将图像替换为其他图像
jQuery -在点击一定次数后将图像替换为其他图像
提问于 2019-05-17 02:58:30
--我是jQuery免责声明的新手--
我有两张图片：
https://i.imgur.com/l2H17fn.jpg
https://i.imgur.com/5nlOoyc.jpg我想在点击五次后显示第二个，而不是第一个。
为了在一次单击后获得要替换的图像，我有如下命令：
HTML：
<div class = "dog">
<img id="happy" src="https://i.imgur.com/l2H17fn.jpg">
</div>jQUERY：
$('.dog').click(function(e){
e.preventDefault();
$("#happy").attr('src',"https://i.imgur.com/5nlOoyc.jpg");
return false;
});现在，如果我想要在第五次单击后替换图像呢？那会是什么样子呢？
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-05-17 03:06:37
你可以用一个变量来跟踪点击：
// initialize click count to zero.
var clicks = 0;
$('.dog').on('click', function() {
// increment click count.
clicks++;
// FOR DEMO - output the click count to the console.
// console.log(clicks);
// if clicks is greater than or equal to 5...
if (clicks >= 5) {
// ... change the image ...
$("#happy").attr('src', "https://i.imgur.com/5nlOoyc.jpg");
// .. and remove this click handler.
$(this).off('click');
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dog">
<img id="happy" src="https://i.imgur.com/l2H17fn.jpg">
</div>
Stack Overflow用户
发布于 2019-05-17 03:17:12
在这里...我认为诀窍是让一个全局信号量variable...This 1在...：)
var clicks = 0;
$('.dog').on('click', function(e){
clicks++;
if(clicks >= 5){
if($('#happy').attr('src') !== 'https://i.imgur.com/5nlOoyc.jpg'){
$("#happy").attr('src',"https://i.imgur.com/5nlOoyc.jpg");
}else{
$("#happy").attr('src',"https://i.imgur.com/l2H17fn.jpg");
}
clicks = 0;
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "dog">
<img id="happy" src="https://i.imgur.com/l2H17fn.jpg">
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56174986
复制相关文章
相似问题