如何在單擊其中一個圖像時切換兩個圖像？

我有我的頁面中有一個文本字段和一個小圖標（edit.png）的情況。最初文本字段在readonly模式&當我點擊這個edit.png它從文本字段中刪除屬性readonly。它工作正常，但現在我想這樣做：
當點擊edit.png它應該從文本字段中刪除屬性readonly以及圖標本身更改爲save.png圖標。這是我的代碼。請建議我應該在哪裏更改以實現此目的。如何在單擊其中一個圖像時切換兩個圖像？

<html> 
<head> 
    <script language="JavaScript"> 
     function removeAlignment(x){ 
     var read=document.getElementById(x).removeAttribute("readonly",0); 
     if(document.getElementById("toogle").value==="OK") 
     { 
      document.getElementById("toogle").value="SAVE"; 
     } 
     } 
    </script> 

    <style type="text/css"> 
     a.table-actions-button { 
      width: 1.25em; 
      height: 1.25em; 
      display: inline-block; 
      background-position: center center; 
     } 
     .ic-table-edit { background-image: url("actions-edit.png"); } 
    </style> 
</head> 
<body> 
    <p> 
    <label for="email">Email</label> 
    <input type="text" name="email" id="email" value="[email protected]" readonly="readonly"/> 
    <a href="#" class="table-actions-button ic-table-edit" title="Edit" onclick="removeAlignment('email');"></a> 
    </p> 
    <input type="submit" id="toogle" value="OK" /> 
</body>

我應該在哪裏更換？請根據我的頁面回答。

來源

2013-04-27 Somnath Kayal

這裏是編輯。

if(document.getElementById("toogle").value==="OK") 
{ 
    document.getElementById("toogle").value="SAVE"; 
    $('.ic-table-edit').css('background-image', 'url("actions-save.png")'); 
}

來源

2013-04-27 06:05:15

您是否測試過它？它不工作。我追加它函數removeAlignment（x）{'線。我應該在哪裏寫這個？ – 2013-04-27 07:00:54

仍然沒有工作。你怎麼看？？我認爲這是爲jQuery。 – 2013-04-27 07:56:07

你是對的，你的文章標籤爲jQuery。 – 2013-04-27 07:59:03

請確保您的代碼中包含了j查詢插件。在錨標記中包含<img>標記。在切換功能中，只需將圖像的src屬性更改爲新圖像即可。查找下面的示例代碼

<html> 
<head> 

    <script> 
     function removeAlignment(x){ 
     var read=document.getElementById(x).removeAttribute("readonly",0); 
     if(document.getElementById("toogle").value==="OK") 
     { 
      document.getElementById("toogle").value="SAVE"; 
      $("#image").attr("src","actions-save.png"); 
     } 
     } 
    </script> 

    <style type="text/css"> 
     a.table-actions-button { 
      width: 1.25em; 
      height: 1.25em; 
      display: inline-block; 
      background-position: center center; 
     } 
    </style> 
</head> 
<body> 
    <p> 
    <label for="email">Email</label> 
    <input type="text" name="email" id="email" value="[email protected]" readonly="readonly"/> 
    <a href="#" class="table-actions-button ic-table-edit" title="Edit" onclick="removeAlignment('email');"><img src="actions-edit.png" id="image"></a> 
    </p> 
    <input type="submit" id="toogle" value="OK" /> 
</body> 
</html>

來源

2013-04-27 07:24:10

你的代碼從開頭顯示保存按鈕。我想切換這兩個。首先編輯按鈕應該顯示，如果我點擊它，編輯按鈕將消失和保存按鈕將顯示。你確定它的工作是這樣嗎？ – 2013-04-27 07:47:19

只需更改圖像名稱並保留所需的名稱。我已根據您的要求更改圖像名稱。 – 2013-04-27 09:12:45

如何在單擊其中一個圖像時切換兩個圖像？

回答

相關問題