javascript - 在 javascript 或 jquery 中的图像之间切换

Question

我需要在“edit.png”和“ok.png”之间切换。最初网页加载包含“edit.png”图像按钮的页面。就像下面的屏幕截图

我的要求是，一旦我单击edit.png，它应该保持为edit.png图像状态。我再次单击 edit.png，它应该更改为“ok.png”。那么我该怎么做，任何人都可以帮助我。

我尝试的是

  $(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

使用点击计数器，因此当您第二次单击该按钮时，它会显示“编辑”按钮并将计数器重置回 0。

当您单击“确定”按钮时，它会变回“编辑”按钮，并且由于您现在已经完成了第一次编辑，因此下次单击该按钮时，它会立即更改为“确定”。

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