javascript 4个按钮，2个工作

我有4个图像标签，id为：

• picture\u off

• picture\u on

• 前进

• 向后走

单击“工作”时，关闭

picture\u

和打开

picture\u。但是，
向前
应该在单击时使包含文本的div消失。这是行不通的

    $(document).ready(function () {
        $("#picture_off").click(function () {
            $("#MinecraftVideo").animate({
                opacity: '1.0'
            });
        $("#Floating_Island").animate({opacity: '0'});
        $("#picture_on").animate({opacity: '1'});
        $("#picture_off").animate({opacity: '0'});
        $("#attribute1").animate({opacity: '0'});
        $("#attribute2").animate({opacity: '1'});
        });
    });

    $(document).ready(function () {
        $("#picture_on").click(function () {
            $("#MinecraftVideo").animate({
                opacity: '0'
            });
        $("#Floating_Island").animate({opacity: '1'});
        $("#picture_off").animate({opacity: '1'});
        $("#picture_on").animate({opacity: '0'});
        $("#attribute1").animate({opacity: '1'});
        $("#attribute2").animate({opacity: '0'});
        });
    });

    $(document).ready(function () {
        $("#go_forward").click(function () {
            $("#PageOneText").animate({
                opacity: '0.0'
            });
        $("#go_forward").animate({opacity: '0'});
        $("#go_backward").animate({opacity: '1'});
        });
    });

伙计们，谢谢你们。问题解决了。显然这不是javascript错误

我所做的是使用CSS来重叠两个精确尺寸的图像。我将其中一个的x值移动了40px，然后huzzah！一切都很顺利

感谢您的帮助和建议。
无需使用多个document.ready功能；只需在同一document.ready函数中注册处理程序。这不是一个绝对的解决方案，对于大型项目来说，这不是一个解决方案，但可以肯定的是，您不希望每个处理程序都有一个单独的document.ready函数！发布JSFIDLE示例提供的信息不完整。缺少用于查找问题的HTML源代码。此外，如果只设置不透明度，则不需要使用.animate（）；改为使用.fadeIn（）和.fade（）简化代码。您发布的代码中没有任何内容会导致问题，因此问题在别处。每个ID都是唯一的吗？干杯，伙计们……老实说，我昨天才开始用javascript编写代码。我会试试你的建议。