javascript - jQuery : Use an alternative to . 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);
    });

但我已经看到 toggle() 在 jQuery 1.8 中已被弃用

所以我试着这样做:

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

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

你知道这是怎么回事吗？

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