4

クラス名が「.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;
        }});

しかし、結果は完璧ではありません。画像の状態が変わらないことがあります。

何が悪いかわかりますか？

4

4 に答える 4

4

問題は複数の画像があることだと思いますが、クリックされた状態を単一の変数で管理しようとしています。次のように、個々の要素に対してクリックされたステータスを保存してみてください。

$('.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)毎回新しいオブジェクトを作成する代わりにオブジェクトをキャッシュすることもできますが、問題を解決するために必要な変更がより明確になるように、私はそうしていません。

于 2013-01-23T11:51:56.230 に答える
3

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

});

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

});
于 2013-01-23T11:56:02.407 に答える
2

jQuery から入手できる MIGRATE コードを使用する

同じことの詳細については、こちらをご覧ください:非推奨の jQuery Toggle Event と同等

于 2013-01-23T11:53:22.380 に答える