Jquery : Use An Alternative To .toggle() Which Is Deprecated

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

Solution 1:

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.

Solution 2:

     LIVE DEMO     

$('.mute_btn').click(function () {

      var src = this.src;
      var isClicked = src.indexOf('-over') > -1 ; // true if '-over' is foundif( 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") ;

}); 

Solution 3:

Use the MIGRATE code available from jQuery

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

Solution 4:

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