jQuery：使用已被弃用的.toggle()的替代方法

Question

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

但结果并不完美。有时候，图片无法改变状态。你知道问题出在哪里吗？

- Sébastien Gicquel

Answer 1

我怀疑问题在于您有多个图像，但是您试图使用单个变量管理其单击状态。请尝试按如下方式针对各个元素存储单击状态：

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

- nnnnnn

---

我该如何缓存$(this)对象？ - Sébastien Gicquel

var $this = $(this); 这里的变量名可以是任何你喜欢的。 - Jai

你也可以链接 jQuery 方法，例如 $(this).attr("src",src).data("clicked",true);。或者根据 roXon 的答案稍微改动整个代码块。 - nnnnnn

Answer 2

     LIVE DEMO     

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

}); 

- Roko C. Buljan

---

我喜欢你找出isClicked是false还是true的方式。聪明！ - Sébastien Gicquel

不错，除了我会删除最后一行，只在if和else块内部写this.src = ...。 - nnnnnn

@nnnnnn在考虑这个问题。不错的想法。实际上是更好的想法。 - Roko C. Buljan

Answer 3

使用jQuery提供的MIGRATE代码

点击这里了解更多内容：已弃用的jQuery切换事件的等效方法

- Spork

Answer 4

我使用的代码是：

。

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

- Cuarcuiu