その行の画像をクリックしたときに特定の行の画像を切り替える

Question

ここで私が尋ねようとしているのは、テーブル仕様に「tabledit」jqueryプラグインを使用したことです。したがって、私は "画像"を "tabledit" "html："キーワードで追加しています。以下のコードのように、 "images"を追加しています。 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 
 

 

 
     });

が、ここで私は、その行のボタンをクリックしたときに、「編集」および特定の行の「OK」の画像を切り替えたいです。しかし、私はそれが私のテーブルの最初の行の画像間で切り替えるだけで実装され、このコードは残りの行の画像には適用されません。誰も私のテーブルのすべての行にこのコードを実装する方法を教えてください。 result of my java script function、私が試したどのようなコードは、誰もがクリックされた特定の行イメージ上の画像を切り替えるには、どのように私を提案してください

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')から取得します。最初の行だけです。

あなたは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; 
} 

のように更新し 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();  
    }); 
}) 

この方法を試すことができます

スクリプト

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