Question

我的情况是在我的页面中有一个文本字段和一个小图标（edit.png）。最初文本字段处于readonly模式＆amp;当我点击此edit.png时，它会从文本字段中删除属性readonly。它工作正常但现在我想这样做：
当点击edit.png时，它应该从文本字段中删除属性readonly以及图标本身更改为save.png icon 。这是我的代码。请建议我应该在哪里改变以实现这一目标。

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

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

Answer 1

这是编辑。

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

Answer 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>

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

2 个答案: