我把这段代码放在一起:
$('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>
&#13;
它应该在两个图像之间切换:2a.png和2b.png当我点击它时没有任何反应。
有人可以告诉我我做错了吗?
答案 0 :(得分:3)
这里的主要问题是你的锚元素,它导致页面重新加载
只需删除锚元素并为图像指定光标
没有锚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);
}
});
&#13;
#img1 {
cursor: pointer;
}
span {
vertical-align: top;
padding: 5px 10px;
background: black;
color: white;
}
&#13;
<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>
&#13;
使用锚点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);
}
});
&#13;
span {
vertical-align: top;
padding: 5px 10px;
background: black;
color: white;
}
&#13;
<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>
&#13;
另一种选择是取消事件冒泡,并保留锚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;
}
});
&#13;
span {
vertical-align: top;
padding: 5px 10px;
background: black;
color: white;
}
&#13;
<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>
&#13;
答案 1 :(得分:0)
正如其他人所指出的那样,可能是因为相对路径问题。如果您不想使用绝对路径,可以在图像上保留数据属性以了解如何处理切换。
$('img').on({
'click': function() {
var i = $(this).attr('data-index');
switch (i) {
case '0':
i = '1';
src = 'https://unsplash.it/100/100?image=1';
break;
case '1':
default:
i = '0';
src = 'https://unsplash.it/100/100?image=0';
break;
}
$(this)
.attr('src', src)
.attr('data-index', i);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<a href="#">
<img id="img1" data-index='1' src="https://unsplash.it/100/100?image=1">
</a>