当我单击其中一个时如何切换两个图像？答案

【问题标题】：how to toggle two image when I click one of them?当我单击其中一个时如何切换两个图像？
【发布时间】：2013-04-27 05:59:08
【问题描述】：

我的页面中有一个文本字段和一个小图标（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="abcd@dsa.com" 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>

我应该在哪里改变？请根据我的页面回答。

【问题讨论】：

标签： javascript jquery image toggle

【解决方案1】：

这里是编辑。

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

【讨论】：

你测试过吗？它不工作。我将它附加在function removeAlignment(x){ 行之前。我应该在哪里写这个？？？
仍然无法正常工作。你认为呢？？我认为它适用于 jquery。

【解决方案2】：

确保您的代码中包含 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="abcd@dsa.com" 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>

【讨论】：

您的代码从一开始就显示保存按钮。我想切换这两个。起初，如果我点击它，只应显示编辑按钮，编辑按钮将消失并显示保存按钮。你确定它是这样工作的吗？？
只需更改图像名称并保留所需名称。我已根据您的要求更改了图像名称。