0

我的页面中有一个文本字段和一个小图标（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>

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

4

2 回答 2

0

这是编辑。

if(document.getElementById("toogle").value==="OK")
{
    document.getElementById("toogle").value="SAVE";
    $('.ic-table-edit').css('background-image', 'url("actions-save.png")');
}
于 2013-04-27T06:05:15.580 回答
0

确保在代码中包含 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>
于 2013-04-27T07:24:10.600 回答