Question

我正在使用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;
}

Answer 1

尝试使用

   <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函数

Answer 2

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

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

2 个答案: