我如何使输入改变它的src与onclick

How can I make an input change its src with an onclick?

本文关键字：src onclick 改变 何使 输入      更新时间：2023-09-26

我正在尝试这个，我的背景改变颜色(我想要的)，但输入的src只在我第二次点击它时改变。我怎么能使它改变源在第一次点击?另外，我怎么能改变src回到原来的第二次点击?

<input id="showHideContainer" type="image" src="on.png " height="3%" width="2%" alt="On" onclick="toggle();">
<script>
document.getElementById('showHideContainer').onclick = function () {
divTest = document.getElementById('header');
if (divTest.style.display === "none") {
    divTest.style.display = 'block';
} else {
    divTest.style.display = "none";
};
$('body').toggleClass('style2');
$('#showHideContainer').click(function(){
$('#showHideContainer').attr('src', 'off.png');
});
}
</script>

您需要确定对象的当前状态，然后将其与另一个

切换
$('#showHideContainer').click(function(){
    var off = $(this).attr('src').indexOf('off.png')>-1;
    $(this).attr('src', (off?'on.png':'off.png'));
});

快速修复。您现在在第一次点击#showHideContainer时附加了另一个事件处理程序，这就是为什么它没有第一次触发。这个精简版本的代码应该会得到预期的结果，还可以查看元素属性状态的另一个答案:

 document.getElementById('showHideContainer').onclick = function () {
        divTest = document.getElementById('header');
        if (divTest.style.display === "none") {
            divTest.style.display = 'block';
        } else {
            divTest.style.display = "none";
        };
        $('body').toggleClass('style2');
        var off = $(this).attr('src').indexOf('off.png')>-1;
        $(this).attr('src', (off?'on.png':'off.png'));
    }
相关文章：