jQuery:使用不推荐使用的.toggle()替代方法

我有一些类名为“.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; }}); 

但结果并不完美。 有时,图像不会改变状态。

你知道什么是错的吗?

现场演示

 $('.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"); } }); 

使用三元运算符的现场演示

 $('.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") ; }); 

我怀疑问题是你有多个图像,但是你试图用一个变量来管理它们的点击状态。 尝试将点击状态存储在各个元素中,如下所示:

 $('.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)对象而不是每次都创建一个新对象,但我没有这样做,因此解决问题所需的更改更为明显。

使用jQuery提供的MIGRATE代码

看看这里有更多相同内容: 相当于已弃用的jQuery Toggle事件

我使用的代码:

 $('#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... } });