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 c         


        

Answer 1

Use the MIGRATE code available from jQuery

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

Answer 2

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

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

}); 

Answer 4

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.