JavaScript 按钮不起作用;代码与其他工作按钮相同

JavaScript buttons not working; code is identical to other working buttons?

本文关键字：按钮 工作 其他 代码 不起作用 JavaScript      更新时间：2023-09-26

我正在使用HTML，CSS和JavaScript编写一个网站。我在页面上有两个按钮，它们使用 JavaScript 在单击时显示信息（单击每个按钮时都会淡出其他信息以节省空间）。但是相同的代码不适用于我的其他按钮？

JavaScript：

<script type = text/javascript>
$('#scoreButton20102011').click(function() {
    $("#maleRec20102011").fadeIn(1000);
    $("#femaleRec20102011").fadeIn(1000);
    $("#maleRec20112012").fadeOut(1000);
    $("#femaleRec20112012").fadeOut(1000);
});
$('#scoreButton20112012').click(function() {
    $("#maleRec20112012").fadeIn(1000);
    $("#femaleRec20112012").fadeIn(1000);
    $("#maleRec20102011").fadeOut(1000);
    $("#femaleRec20102011").fadeOut(1000);
});​
</script>
2010/11 的按钮

显示两个按钮文本，而 2011/12 的按钮让一切都淡出？我不明白为什么。

CSS：

#maleRec20112012 {
    border-top: 3px solid #000;
    border-left: 3px solid #000;
    border-right: 3px solid #000;
    border-bottom: 3px solid #000;
    position: absolute;
    display: none;
    right: 0;
    width: 350px;
    height: 400px;
}
#femaleRec20112012 {
    border-top: 3px solid #E6E6DC;
    border-left: 3px solid #E6E6DC;
    border-right: 3px solid #E6E6DC;
    border-bottom: 3px solid #000;
    position: absolute;
    display: none;
    left: 0;
    width: 350px;
    height: 400px;
}
#maleRec20102011 {
    border-top: 3px solid #E6E6DC;
    border-left: 3px solid #E6E6DC;
    border-right: 3px solid #E6E6DC;
    border-bottom: 3px solid #000;
    position: absolute;
    display: none;
    left: 0;
    width: 350px;
    height: 400px;
}
#femaleRec20102011 {
    border-top: 3px solid #E6E6DC;
    border-left: 3px solid #E6E6DC;
    border-right: 3px solid #E6E6DC;
    border-bottom: 3px solid #000;
    position: absolute;
    display: none;
    left: 0;
    width: 350px;
    height: 400px;
}

尝试使用

   <script type = text/javascript>
            $('#scoreButton20102011').live('click',function()
            {
                $("#maleRec20102011").fadeIn(1000);
                $("#femaleRec20102011").fadeIn(1000);
                $("#maleRec20112012").fadeOut(1000);
                $("#femaleRec20112012").fadeOut(1000);                  
            });
            $('#scoreButton20112012').live('click',function()
            {
                $("#maleRec20112012").fadeIn(1000);
                $("#femaleRec20112012").fadeIn(1000);
                $("#maleRec20102011").fadeOut(1000);
                $("#femaleRec20102011").fadeOut(1000);
            });
        </script>

或者尝试将代码放入 onready 函数中

这个简化的 JSFiddle 是否按预期工作？ http://jsfiddle.net/9JAGK/如果是这样，我猜你的问题实际上在你的代码中的其他地方。也许检查可能分配给您的按钮或样式的任何其他事件，这些事件可能与淡入/淡出冲突？

相关文章：