javascript - 如何获取与 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 上的点击功能添加一个事件监听器

$(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);
    }
});

});