似乎无法使jQuery onClick fadeOut在我的页面上正常工作

Question

这真杀了我。 我花了两天的大部分时间来尝试完成这项工作。

最终，我要实现的目标是列出3个项目，“轻”，“常规”和“深”触发与该列表中每个项目匹配的特定div的淡入。 我正在使用z-index在背景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');
    });
});

我有这样的html设置：

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

而我的CSS：

#main_light_layover
{
    display:none;
    position:absolute;
    width:900px;
    margin:0 auto;
    padding:0px;
    border:0px;
    top:0px;
    left:0px;
    z-index:8;
    overflow:visible;
}

.light_layover
{

    position:relative;
    top:10px;
    left:-60px;
    z-index:8;
}

我的jQuery并不是很好，但这根本无法正常工作。 我想知道它是否有问题，因为点击目标在第二个div之内？

我开始更多地尝试它，以查看是否可以使工作更简单，例如正常加载图像并使用jQuery在单击时使其淡出，但我什至无法在我的特定页面上使它起作用我可以在jsFiddle上使用准系统版本：

http://jsfiddle.net/UpX3L/197/

似乎我根本无法在我的特定页面上找到完全消失的目标。 谁能提供一些见识？

编辑-这是一个jsFiddle以我希望页面工作的方式工作：

http://jsfiddle.net/3XwZv/507/

Answer 1

删除点击功能中的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');
});
 });

Answer 2

如帖子评论中所述，选择器已关闭。

#是ID的前缀. 是用于类的前缀

因此，您想要作为选择器$('.light_layover') ，而不是$('#light_layover') 。

另外，如果您的div隐藏，则可能不会显示图像。 因此，也许您打算使用$('#main_light_layover')而不是仅使用'light_layover'吗？

编辑：查看您的代码...您需要确保在运行$(selector)之前，已将选择器中的元素加载到DOM中。 您可以通过$(document).ready(initialize) ，其中initialize是设置点击处理程序的函数。

参见jQuery.load和jQuery.ready