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