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>

EDIT结束

在两行上都有http://jthink.net/songkong/scratch/open.png会给出相同的图像

你的小提琴上的样本没有图片，而且id =＆＃39; 2＆＃39;与id =＆＃39; 1＆＃39;

中的相同

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

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

2 个答案: