jQuery : Use an alternative to .toggle() which is deprecated

Question

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

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.

Do you know what's wrong ?

score 4 · Answer 1 · answered Jan 23 '13 at 11:51

I suspect the problem is that you have multiple images, but you're trying to manage their clicked status with a single variable. Try storing the clicked status against the individual elements as follows:

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

Note that you could cache your $(this) object instead of making a new one each time, but I've not done so so that the change needed to solve your problem is more obvious.

`var $this = $(this);` like this any variable name you like. — Jai, Jan 23 '13 at 12:11
You can also chain jQuery methods, e.g., `$(this).attr("src",src).data("clicked",true);`. Or rework the whole thing a bit as per roXon's answer. — nnnnnn, Jan 23 '13 at 12:12

Roko C. Buljan · Accepted Answer · 2013-01-23T12:16:33.857

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

});

edited Jan 23 '13 at 12:16

answered Jan 23 '13 at 11:56

Roko C. Buljan

196,159
39
305
313

I like the way you find if isClicked is false or true. Smart ! – Sébastien Gicquel Jan 23 '13 at 12:04
1

Nice, except I would remove the last line and just say `this.src = ...` inside the if and the else blocks. – nnnnnn Jan 23 '13 at 12:11
@nnnnnn was thinking about that. good idea. Actually better idea. – Roko C. Buljan Jan 23 '13 at 12:12

score 2 · Answer 3 · edited May 23 '17 at 12:27

2

Use the MIGRATE code available from jQuery

Have a look here for more on the same: Equivalent of deprecated jQuery Toggle Event

edited May 23 '17 at 12:27

Community

1
1

answered Jan 23 '13 at 11:53

Spork

1,631
1
21
37

score 1 · Answer 4 · answered May 22 '13 at 21:47

The code that I use:

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

jQuery : Use an alternative to .toggle() which is deprecated

4 Answers4

Linked

Related