Toggle between images in javascript or jquery

Question

I need to toggle between "edit.png" and "ok.png" . Initially web page loads the page contains "edit.png" image buttons. Like in the screen shot below

My requirement is, once i click on the edit.png it should be remains as edit.png image state. And once again i click on the edit.png it should changed to "ok.png". So how can i do this anyone help me.

What i tried is

  $(function(){
$('.edit').on('click',function(){   
   $(this).toggle();  
   //show the ok button which is just next to the edit button
   $(this).next(".ok").toggle();  
});

$('.ok').on('click',function(){ 
   $(this).toggle();  
   $(this).next(".edit").toggle();     
   });
 })

$('#projectsTable').Tabledit({
	url: '#',
	deleteButton: false,
	buttons: {
	   edit: {
		   class: 'btn btn-primary secodary',
		   html: '<img src="/concrete5/application/images/animated/btn_edit.png" class="edit" /><img src="/concrete5/application/images/animated/btn_ok.png" class="ok" style="display:none" />',
		   action: 'edit'
	  }

	},
	columns: {
	   identifier: [1, 'Projects'],
	   hideIdentifier: true,
	 editable: [[1, 'Projects'], [2, 'Subprojects'],[8, 'Project Status', '{"1": "Open", "2": "Closed"}']]
	},
	onDraw: function() {
	   console.log('onDraw()');
	},
	onSuccess: function(data, textStatus, jqXHR) {
	   console.log('onSuccess(data, textStatus, jqXHR)');
	   console.log(data);
	   console.log(textStatus);
	   console.log(jqXHR);
	},
	onFail: function(jqXHR, textStatus, errorThrown) {
	   console.log('onFail(jqXHR, textStatus, errorThrown)');
	   console.log(jqXHR);
	   console.log(textStatus);
	   console.log(errorThrown);
	},
	onAlways: function() {
	   console.log('onAlways()');
	},
	onAjax: function(action, serialize) {
		console.log('onAjax(action, serialize)');
		console.log(action);
		console.log(serialize);
	}
});

$(function(){
	$('.edit').on('click',function(){   
		$(this).toggle();  
		//show the ok button which is just next to the edit button
		$(this).next(".ok").toggle();  
	});
	$('.ok').on('click',function(){ 
		$(this).toggle();  
		$(this).next(".edit").toggle();     
	});
})

Answer 1

Use a click counter, so when you click on the button the second time, it shows the "edit" button and resets the counter back to 0.

When you then click on the "ok" button it changes back to the "edit" button, and because you now have done the first edit, next time you click on the button it changes to "ok" right away.

$('.edit').each(function() {
  var clickCounter = 0, // Sets click counter to 0 - No clicks done yet
      firstEdit = false; // Sets first edit to false
  $(this).on('click', function() {
      clickCounter++;
      if( clickCounter == 2 || firstEdit == true ) {
        $(this).toggle();
        $(this).next('.ok').toggle();
        clickCounter = 0; // Reset counter
        firstEdit = true;
      }
  });
});
$('.ok').on('click', function() {
    $(this).toggle();
  $(this).prev('.edit').toggle();
});

Working Fiddle

Answer 2

You can use one class to control and change the state of your button:

$('.edit').on('click',function(){   
   if ($(this).hasClass('is-state1')) {
       $(this).next(".ok").toggle();
       $(this).toggle();   
   }
   $(this).toggleClass('is-state1');  
});

$('.ok').on('click',function(){ 
   $(this).toggle();  
   $(this).next(".edit").toggle();     
});

Also I'm thinking you are wrong in ok button event as you want change your previous and not your next button:

$('.ok').on('click',function(){ 
   $(this).toggle();  
   $(this).prev(".edit").toggle();     
});

Answer 3

 $(window).ready(function(){
     $('.edit').each(function(){
       var counter=0;//add a counter to each edit button
       this.on('click',function(){   
          counter++;//increase counter
         console.log(counter);
          if(counter===2){//if button clicked twice
              $(this).toggle();  
              //show the ok button which is just next to the edit button
              $(this).next(".ok").toggle();  
              counter=0;//reset counter
         }
        });
     });
    });

or taking pure ES6:

window.onload=function(){//when the page is loaded
  var imgs=[...document.getElementsByClassName("edit")];//get all edit imgs
  imgs.forEach(img=>{//loop trough images
      var counter=0;//add a counter for each image
      img.onclick=function(){
          counter++;//onclick increase counter
          if(conter===2){//if img was clicked twice
              this.src="ok.png";//replace the img
              counter=0;
          }
      }
  });
};