基于div可见性切换按钮显示/隐藏的jQuery代码失效问题咨询

我来帮你梳理下这段代码无法正常工作的原因，主要有3个关键问题需要调整：

• JS代码执行时机不对
  你把jQuery事件绑定的代码写在了DOM元素之前，浏览器是从上到下解析页面的，当执行$("#button1,#button2").click(...)的时候，页面上的button1、button2还没被加载出来，导致事件根本绑定不上。解决办法要么把JS代码放到所有DOM元素的后面，要么用$(document).ready()包裹代码，确保DOM加载完成后再执行绑定。

• toggle动画参数大小写错误
  jQuery的toggle()方法里的速度参数是小写的slow，你写的"Slow"首字母大写了，这会让jQuery识别不到这个动画参数，直接跳过动画效果，甚至可能导致逻辑异常。

• 初始按钮状态未配置
  默认情况下两个按钮都会显示，这不符合你的交互逻辑——应该一开始只显示对应div1状态的按钮。比如如果div1默认是显示的，那button2应该一开始就隐藏；如果div1默认隐藏，就反过来。

修正后的完整代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="divClick"> 
    <input type="image" id="button1" src="Images/down.png" alt="Submit1" width="25" height="25"> 
    <br> 
    <input type="image" id="button2" src="Images/up.png" alt="Submit2" width="25" height="25" style="display:none;"> 
</div> 
<div id="div1"> Welcome!!! </div>

<script>
$(document).ready(function() {
    $("#button1,#button2").click(function () { 
        $("#div1").toggle("slow"); 
        if ($("#div1").is(':visible')) { 
            $('#button1').show(); 
            $('#button2').hide(); 
        } else { 
            $('#button1').hide(); 
            $('#button2').show(); 
        } 
    }); 
});
</script>

补充说明 #

• 我给button2加了style="display:none;"，因为默认div1是显示状态，所以一开始只显示button1；如果你的div1默认是隐藏的，就把这个样式加到button1上。
• 用$(document).ready()包裹了JS代码，确保DOM加载完成后再绑定事件，避免元素找不到的问题。
• 把"Slow"改成了小写的"slow"，保证动画效果正常执行。

内容的提问来源于stack exchange，提问作者CrazyCoder