jQuery:使用不推荐使用.toggle()的替代方法 [英] jQuery : Use an alternative to .toggle() which is deprecated

问题描述

我有一些图像的类名为".mute_btn"，当我单击它们时，我的图像源正在更改:

I have some images with class name ".mute_btn" and when i click on them, my images source is changing :

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

But i've seen that toggle() is deprecated in jQuery 1.8

所以我正在尝试这样做:

So i'm trying to do it like this :

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;
        }});

但是结果并不完美.有时，图像不会更改状态.

But the result is not perfect. Sometime, the images do not change state.

你知道怎么了吗?

推荐答案

     实时演示     

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

});

     使用三元运算符进行实时演示 /kbd>

     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") ;

}); 

这篇关于jQuery:使用不推荐使用.toggle()的替代方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！