單擊特定行上的圖像時，在該行上的圖像之間切換

Question

這里我想問的是，我使用了“tabledit”jquery 插件來進行表格規范。 因此我通過“tabledit”“html:”關鍵字添加“圖像”，就像下面的代碼我添加“圖像”。 我的網頁的屏幕截圖

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

但在這里，當我單擊該行按鈕時，我想在特定行的“編輯”和“確定”圖像之間切換。 但是當我實現它時，它只在表格第一行的圖像之間切換，此代碼不適用於剩余的行圖像。 那么誰能告訴我如何將這段代碼實現到我表的每一行。 我的java腳本函數的結果，我嘗試的代碼是

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

任何人都請建議我如何在單擊的特定行圖像上的圖像之間切換。

Answer 1

代碼將其應用於id = edit元素，這不是您想要的。 該函數正在申請您從document.getElementById('edit')返回的第一個匹配元素，在您的情況下只是第一行。

你可以試試這種方式切換（）

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

更好的方法

在table編輯動作 html 中像這樣更新

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;
}

腳本

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