gpt4 book ai didi

javascript - jquery onclick 切换图像 src

转载 作者:可可西里 更新时间:2023-11-01 12:59:46 25 4
gpt4 key购买 nike

我把这段代码放在这里:

$('img').on({
'click': function() {
var src = ($(this).attr('src') === 'memes/2a.png')
? 'memes/2b.png'
: 'memes/2a.png';
$(this).attr('src', src);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<a href="#"><img id="img1" src="memes/2a.png" height="500" width="600"></a>

它应该在两个图像之间切换:2a.png 和 2b.png 当我点击它时没有任何反应。

谁能告诉我我做错了什么?

最佳答案

这里的主要问题是你的 anchor 元素,它导致页面重新加载

简单地移除 anchor 元素并给图像一个指针光标

没有 anchor a,光标在图像上

$('img').on({
'click': function() {
document.querySelector('span').textContent = $(this).attr('src');
var src = ($(this).attr('src') === 'animals/5/')
? 'animals/6/'
: 'animals/5/';
$(this).attr('src', src);
}
});
#img1 {
cursor: pointer;
}

span {
vertical-align: top;
padding: 5px 10px;
background: black;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<base href="http://lorempixel.com/300/300/">
<img id="img1" src="animals/5/" height="300" width="300">
<span></span>

使用 anchor a,将无法正常工作

$('img').on({
'click': function() {
document.querySelector('span').textContent = $(this).attr('src');
var src = ($(this).attr('src') === 'animals/5/')
? 'animals/6/'
: 'animals/5/';
$(this).attr('src', src);
}
});
span {
vertical-align: top;
padding: 5px 10px;
background: black;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<base href="http://lorempixel.com/300/300/">
<a href="#"><img id="img1" src="animals/5/" height="300" width="300"></a>
<span></span>

另一种选择是取消事件冒泡,并保留 anchor a,但我仍然建议简单地删除它

$('img').on({
'click': function(e) {
document.querySelector('span').textContent = $(this).attr('src');
var src = ($(this).attr('src') === 'animals/5/')
? 'animals/6/'
: 'animals/5/';
$(this).attr('src', src);
e.stopPropagation();
return false;
}
});
span {
vertical-align: top;
padding: 5px 10px;
background: black;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<base href="http://lorempixel.com/300/300/">
<a href="#"><img id="img1" src="animals/5/" height="300" width="300"></a>
<span></span>

关于javascript - jquery onclick 切换图像 src,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41783550/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com