[英]How can I get image associated with html input button to change when clicked
I want the open.png image associated with the image button to become close.png when I click on the input image button and go back to open.png when i click on it again. 我希望与图像按钮关联的open.png图像在单击输入图像按钮时变为close.png,并在再次单击时返回到open.png。
Im stuck on how I do this, but I do have a jsfiddle example ready to go https://jsfiddle.net/ijabz/xgLz76kn/40/ 我对如何做到这一点感到困惑,但我确实有一个准备好的jsfiddle示例https://jsfiddle.net/ijabz/xgLz76kn/40/
<table>
<tr>
<td><input type="image" onclick="return toggleMe('1')" src="http://jthink.net/songkong/scratch/open.png"/></td>
<td>Column 2</td>
</tr>
<tr id="1" style="display:none">
<td colspan="2">
<table>
<tr>
<td>Inner Data 1</td>
<td>Inner Data 2</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><input type="image" onclick="return toggleMe('2')" src="http://jthink.net/songkong/scratch/open.png"/></td>
<td>Column 2</td>
</tr>
<tr id="2" style="display:none">
<td colspan="2">
<table>
<tr>
<td>Inner Data 3</td>
<td>Inner Data 4</td>
</tr>
</table>
</td>
</tr>
</table>
Javascript function is JavaScript函数是
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="table-row"
}
else{
e.style.display="none"
}
return true;
}
change 更改
input type="image"
to 至
<img onclick="return toggleMe('2')" src="http://jthink.net/songkong/scratch/open.png"/>
and add an event listener for the click function on your img 并在img上为click函数添加一个事件侦听器
$(document).ready(function(){
$('img').on({
'click': function() {
var src = ($(this).attr('src') === 'http://jthink.net/songkong/scratch/open.png')
? 'http://jthink.net/songkong/scratch/close.png'
: 'http://jthink.net/songkong/scratch/open.png';
$(this).attr('src', src);
}
});
}); });
EDIT: The accepted answer works but is fare more complex than it needs to, ref. 编辑:可接受的答案有效,但是比需要的要复杂得多。 updated sample on fiddle: https://jsfiddle.net/xgLz76kn/53/ 小提琴上的更新示例: https : //jsfiddle.net/xgLz76kn/53/
<table>
<tr>
<td><input type="image" onclick="toggleMe(this)" value="Tracks" src="http://jthink.net/songkong/scratch/open.png"/></td>
<td>Column 2</td>
</tr>
<tr id="1">
<td colspan="2">
<table>
<tr>
<td>Inner Data 1</td>
<td>Inner Data 2</td>
</tr>
</table>
</td>
</tr>
</table>
<script type='text/javascript'>
function toggleMe(btn){
btn.src = btn.src=="http://jthink.net/songkong/scratch/open.png" ? "http://jthink.net/songkong/scratch/close.png" : "http://jthink.net/songkong/scratch/open.png";
}
</script>
EDIT ends 编辑结束
Having http://jthink.net/songkong/scratch/open.png on both rows will give the same image 两行上都有http://jthink.net/songkong/scratch/open.png将产生相同的图像
Your sample on fiddle has no images and the texts in id='2' is the same as in id='1' 您在小提琴上的样本没有图像,并且id ='2'中的文本与id ='1'中的文本相同
If you check a modified version on https://jsfiddle.net/xgLz76kn/48/ you will see that it works as expected 如果您在https://jsfiddle.net/xgLz76kn/48/上检查修改后的版本,您将看到它按预期工作
<table>
<tr>
<td><input type="button" onclick="toggleMe(1)" value="Tracks"/></td>
<td>Column 2</td>
</tr>
<tr id="1" style="display:none">
<td colspan="2">
<table>
<tr>
<td>Inner Data 1</td>
<td>Inner Data 2</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><input type="button" onclick="toggleMe(2)" value="Tracks"/></td>
<td>Column 2</td>
</tr>
<tr id="2" style="display:none">
<td colspan="2">
<table>
<tr>
<td>Inner Data 3</td>
<td>Inner Data 4</td>
</tr>
</table>
</td>
</tr>
</table>
function toggleMe(a){
var el = document.getElementById(a);
el.style.display = el.style.display=="none" ? "table-row" : "none";
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.