我如何获得与html输入按钮关联的图像以在单击时更改

Question

我希望与图像按钮关联的open.png图像在单击输入图像按钮时变为close.png，并在再次单击时返回到open.png。

我对如何做到这一点感到困惑，但我确实有一个准备好的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 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;
}

Answer 1

的jsfiddle

更改

input type="image"

至

<img onclick="return toggleMe('2')" src="http://jthink.net/songkong/scratch/open.png"/>

并在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);
    }
});

}）;

Answer 2

编辑：可接受的答案有效，但是比需要的要复杂得多。 小提琴上的更新示例： 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>

编辑结束

两行上都有http://jthink.net/songkong/scratch/open.png将产生相同的图像

您在小提琴上的样本没有图像，并且id ='2'中的文本与id ='1'中的文本相同

如果您在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";
}