单击其中之一时如何切换两个图像？
[英]how to toggle two image when I click one of them?
问题描述
I have situation where in my page one text field and a small icon(edit.png) is there. 
我遇到这样的情况，在我的页面中有一个文本字段和一个小图标（edit.png）。 Initially text field is in readonly mode & when I click this edit.png it remove the attribute readonly from text field. 最初，文本字段处于readonly模式，当我单击此edit.png它会从文本字段中删除readonly属性。 It works fine but now I want to do this: 它工作正常，但现在我要这样做：
When click on edit.png it should remove the attribute readonly from text field as well as the icon itself change to save.png icon. 单击edit.png ，应从文本字段中删除readonly属性，并且图标本身更改为save.png图标。 This is my code. 这是我的代码。 Please suggest where should I change to achieve this. 请提出我应该在哪里更改以实现此目标。
<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>
Where should I change? 我应该在哪里改变？ Please answer according to my Page. 请根据我的页面回答。
2 个解决方案
解决方案1
0 2013-04-27 06:05:15
Here's the edit. 这是编辑。
if(document.getElementById("toogle").value==="OK")
{
document.getElementById("toogle").value="SAVE";
$('.ic-table-edit').css('background-image', 'url("actions-save.png")');
}
解决方案2
0 2013-04-27 07:24:10
Make sure you have included j query plugin in your code. 确保您的代码中包含了j查询插件。 With in the anchor tag,include <img> tag. 在锚标记中，包含<img>标记。 In toggle function,just change src attribute of your image to new image. 在切换功能中，只需将图像的src属性更改为新图像即可。 Find the example code below 在下面找到示例代码
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.