我有一些类名为“.mute_btn”的图像,当我单击它们时,我的图像源正在更改:
$('.mute_btn').toggle(function () {
var clicked = false;
var src = $(this).attr("src");
src = src.replace(/(.*)\.(png|gif|jpg|jpeg)$/, "$1-over.$2");
$(this).attr("src", src);
}, function () {
var src = $(this).attr("src");
src = src.replace(/(.*)-over\.(png|gif|jpg|jpeg)$/, "$1.$2");
$(this).attr("src", src);
});
但我已经看到,toggle() 在 jQuery 1.8 中已被弃用
所以我尝试这样做:
var clicked = false;
$('.mute_btn').click(function() {
if (clicked) {
var src = $(this).attr("src");
src = src.replace(/(.*)-over\.(png|gif|jpg|jpeg)$/, "$1.$2");
$(this).attr("src", src);
clicked = false;
}
else {
var src = $(this).attr("src");
src = src.replace(/(.*)\.(png|gif|jpg|jpeg)$/, "$1-over.$2");
$(this).attr("src", src);
clicked = true;
}});
但结果并不完美。有时,图像不会改变状态。
你知道出了什么问题吗?
我怀疑问题在于您有多个图像,但您试图使用单个变量来管理它们的单击状态。尝试存储各个元素的点击状态,如下所示:
$('.mute_btn').click(function() {
if ($(this).data("clicked")) {
var src = $(this).attr("src");
src = src.replace(/(.*)-over\.(png|gif|jpg|jpeg)$/, "$1.$2");
$(this).attr("src", src);
$(this).data("clicked",false);
}
else {
var src = $(this).attr("src");
src = src.replace(/(.*)\.(png|gif|jpg|jpeg)$/, "$1-over.$2");
$(this).attr("src", src);
$(this).data("clicked",true);
}
});
请注意,您可以缓存您的$(this)
对象而不是每次都创建一个新对象,但我没有这样做,以便解决问题所需的更改更加明显。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)