Javascript Can'；在我的页面上，jQuery onClick淡出似乎不起作用

这简直要了我的命。我花了两天的大部分时间试图让这一切顺利进行

最终，我试图实现的是有一个包含3个项目的列表，“轻”、“常规”和“深”触发与列表中每个项目匹配的特定div的淡入。我正在使用z索引将div分层到背景div之上

因此，当我单击“灯光”时，背景div上方的图像会淡出，如果在单击时可以看到“常规”或“深”，则它们会淡出（无论如何，一次只能看到1个）

基本上，jQuery是这样设置的：

$('#main_right_line_one').click(function(){
    $('#main_regular_layover, #main_deep_layover').fadeOut('slow', function(){
        $('#main_light_layover').fadeIn('slow');
    });
});

$('#main_right_line_two').click(function(){    
    $('#main_light_layover, #main_deep_layover').fadeOut('slow', function(){
        $('#main_regular_layover').fadeIn('slow');
    });
});

$('#main_right_line_three').click(function(){
    $('#main_light_layover, #main_regular_layover').fadeOut('slow', function(){
        $('#main_deep_layover').fadeIn('slow');
    });
});

<div id="main_container">
          <div id="main_top_left">
          </div>
          <div id="main_top_right">
                <a id="main_right_line_one" href="#">Light</a><br />
                <a id="main_right_line_two" href="#">Regular</a><br />
                <a id="main_right_line_three" href="#">Deep</a>
          </div>
          <div id="main_bottom">
          </div>
          <div id="main_light_layover">
                <img class="light_layover" src="/images/light_layover.png" />
          </div>

我的html设置如下：

$('#main_right_line_one').click(function(){
    $('#main_regular_layover, #main_deep_layover').fadeOut('slow', function(){
        $('#main_light_layover').fadeIn('slow');
    });
});

$('#main_right_line_two').click(function(){    
    $('#main_light_layover, #main_deep_layover').fadeOut('slow', function(){
        $('#main_regular_layover').fadeIn('slow');
    });
});

$('#main_right_line_three').click(function(){
    $('#main_light_layover, #main_regular_layover').fadeOut('slow', function(){
        $('#main_deep_layover').fadeIn('slow');
    });
});

<div id="main_container">
          <div id="main_top_left">
          </div>
          <div id="main_top_right">
                <a id="main_right_line_one" href="#">Light</a><br />
                <a id="main_right_line_two" href="#">Regular</a><br />
                <a id="main_right_line_three" href="#">Deep</a>
          </div>
          <div id="main_bottom">
          </div>
          <div id="main_light_layover">
                <img class="light_layover" src="/images/light_layover.png" />
          </div>

我的jQuery不是很好，但它根本不起作用。我想知道它是否有问题，因为点击的目标在第二个div内

我开始更多地使用它，看看是否可以获得更简单的工作方式，比如正常加载图像并使用jQuery在单击时淡出图像，但我甚至无法在我的特定页面上使用它，但我可以在JSFIDLE上获得一个基本版本：

似乎我根本无法在我的特定页面上找到淡入工作的目标。有人能提供一些见解吗

编辑-下面是一个JSFIDLE，按照我希望页面的方式工作：

---

删除单击功能中的e

$('#main_right_line_one').click(function(){
$('#regular_layover, #deep_layover').fadeOut('slow', function(){
    $('#main_light_layover').show('slow');
});
});

$('#main_right_line_two').click(function(){    
$('#light_layover, #deep_layover').fadeOut('slow', function(){
    $('#regular_layover').fadeIn('slow');
});
});

 $('#main_right_line_three').click(function(){
$('#light_layover, #regular_layover').fadeOut('slow', function(){
    $('#deep_layover').fadeIn('slow');
});
 });

---

正如你的帖子评论中提到的，你的选择器已经关闭

#

是用于ID的前缀，

是用于类的前缀

因此，您希望作为选择器

$（'.light\u layour'）

，而不是

$（''light\u layour'）

此外，如果您的div被隐藏，您的图像可能不会显示。因此，也许您打算使用

$（“#main_light_layour”）

而不是只使用“light_layour”

编辑：查看您的代码。。。在运行

$（选择器）

之前，需要确保选择器中的元素已加载到DOM中。您可以通过

$（文档）执行此操作。ready（initialize）

其中

initialize

是设置单击处理程序的函数

---

请参阅和

，这应该没有任何区别。您确定您的jQuery选择器正确吗？例如，您引用了#light_layour，但在您的代码中，light_layour是一个类而不是一个id（例如，light_layour）？我粘贴了一个旧的JS块。我更新了OP以反映实际使用的代码。还有一个指向下面实际页面的链接。我实际上粘贴了一段旧代码。在脚本中，我使用类的所有ID。这里有一个指向实际页面的链接：在查看了js/main.js文件之后，我认为您正在执行

$（选择器）。单击
方法可以提前执行。尝试将它们粘贴到
函数init（）{…}
函数中，并使用
$.ready（init）
加载运行init（当然是在init函数之外）。你认为我的脚本运行得太快了吗？我要把它扔在一起，试试看。我只是想了解两者之间的区别。加载您的页面并查看开发人员控制台。您将看到“UncaughtReferenceError:$未定义”（Chrome）。正如影子爬行者所指出的，这发生在main.js中。我也没有注意到对jQuery的引用。如果脚本运行，在将
#myId
对象加载到DOM之前执行
jQuery（“#myId”）
，则
jQuery
命令将返回一个空列表，因为对象还不在那里。而且，正如@VeritaseTrato所指出的，您忘记在页面中包含jquery.js。