Umschalten zwischen Bildern in einer bestimmten Zeile, wenn auf Bilder in dieser Zeile geklickt wird

Question

Hier was ich zu fragen versuche ist, habe ich das "Tabledit" jquery Plugin für Tabellenspezifikationen verwendet. Daher füge ich "Bilder" durch "tabledit" "html:" keyword hinzu, wie unter code, den ich "images" hinzufüge. screen shot of my web page

$('#projectsTable').Tabledit({ 
 

 
      url: '#', 
 
      deleteButton: false, 
 
      
 

 

 
     buttons: { 
 
       edit: { 
 
        class: 'btn btn-primary secodary', 
 
        html: '<img src="/concrete5/application/images/animated/btn_edit.png" id="edit" /><img src="/concrete5/application/images/animated/btn_ok.png" id="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); 
 
      } 
 
    \t \t 
 

 

 
     });

aber hier i zwischen „bearbeiten“ wechseln will und „ok“ Bilder auf bestimmte Zeile, wenn ich auf dieser Zeile Schaltfläche geklickt. Aber da ich es nur zwischen Bildern in der ersten Zeile meiner Tabelle umwandelte, ist dieser Code nicht für die verbleibenden Zeilenbilder anwendbar. Kann mir jemand sagen, wie ich diesen Code in jede Zeile meines Tisches implementieren kann? result of my java script function, was der Code habe ich versucht, ist

var toggle = true; 
function changing() 
{ 
document.getElementById("edit").style.display = toggle ? 'none' : 'block'; 
document.getElementById("ok").style.display = toggle ? 'block' : 'none'; 
toggle = !toggle; 
} 

mir jemand bitte vorschlagen, wie wechseln geklickt zwischen den Bildern auf bestimmten Zeile Bildern.

Answer 1

Der Code wird auf Element mit id = edit angewendet, das ist nicht was Sie wollen. Die Funktion gilt für das erste passende Element, das Sie von document.getElementById('edit') zurückerhalten, in Ihrem Fall nur die erste Zeile.

können Sie auf diese Weise versuchen toggle()

//this assumes you have jquery. can also be acheived via vanilla js as well. 
//listen to click event on the .edit and .ok (classes) buttons 
// also good idea to increase accuracy by img.edit and img.ok instead of just matching on classes 
$(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).prev(".edit").toggle();  
    }); 
}) 

einen noch besseren Ansatz

Im table Aktion bearbeitet html nur

wie so aktualisieren

html: '<img class="edit" />', 

css

.edit { 
background: url("/concrete5/application/images/animated/btn_edit.png") no-repeat scroll 0 0 transparent; 
} 

.ok { 
background: url("/concrete5/application/images/animated/btn_ok.png") no-repeat scroll 0 0 transparent; 
} 

Skript

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