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

工作小提琴

Answer 2

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

或采用纯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;
          }
      }
  });
};

Answer 3

您可以使用一个类来控制和更改按钮的状态：

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

另外我还认为您在ok按钮事件中错了，因为您想更改上一个按钮而不是下一个按钮：

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