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

但我已经看到，在jQuery1.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() {
    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提供的迁移代码

请在此查看更多相同的信息：

我使用的代码：

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

---

如何缓存$（this）对象？

var$this=$（this）

像这样可以是您喜欢的任何变量名。您还可以链接jQuery方法，例如，

$（this）.attr（“src”，src）.data（“clicked”，true）。或者按照roXon的回答对整个事情进行一点修改。我喜欢你发现isClicked是假的还是真的。聪明！很好，不过我会删除最后一行，在if和else块中只说
this.src=…
。@nnnnnn正在考虑这个问题。好主意。实际上是个更好的主意。
$('.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") ;

}); 

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