我有一些类名为“.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);
});
但我已经看到在jQuery 1.8中不推荐使用toggle()
所以我试着这样做:
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;
}});
但结果并不完美。有时,图像不会改变状态。
你知道什么是错的吗?
答案 0 :(得分:4)
我怀疑问题在于您有多个图片,但是您尝试使用单个变量管理其点击状态。尝试将点击状态存储在各个元素中,如下所示:
$('.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)
对象而不是每次都创建一个新对象,但我没有这样做,以便解决问题所需的更改更明显。
答案 1 :(得分:3)
$('.mute_btn').click(function () {
var src = this.src;
var isClicked = src.indexOf('-over') > -1 ; // true if '-over' is found
if( isClicked ){
this.src = src.replace(/(.*)-over\.(png|gif|jpg|jpeg)$/, "$1.$2");
}else{
this.src = src.replace(/(.*)\.(png|gif|jpg|jpeg)$/, "$1-over.$2");
}
});
LIVE DEMO using ternary operator
$('.mute_btn').click(function () {
var src = this.src;
var isClicked = src.indexOf('-over') > -1 ;
this.src = isClicked ?
src.replace(/(.*)-over\.(png|gif|jpg|jpeg)$/, "$1.$2") :
src.replace(/(.*)\.(png|gif|jpg|jpeg)$/, "$1-over.$2") ;
});
答案 2 :(得分:2)
使用jQuery提供的MIGRATE代码
请点击此处查看相同内容:Equivalent of deprecated jQuery Toggle Event
答案 3 :(得分:1)
我使用的代码:
$('#example').click(function()
{
isClicked=$(this).data('clicked');
if (isClicked) {isClicked=false;} else {isClicked=true;}
$(this).data('clicked',isClicked);
if(isClicked)
{
...do stuff...
}
else
{
...do stuff...
}
});