1

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

最终，我想要实现的是拥有 3 个项目的列表，“Light”、“Regular”和“Deep”触发与列表中每个项目匹配的特定 div 的淡入。我正在使用 z-index 将 div 分层到背景 div 之上。

因此，当我单击“Light”时，图像会在背景 div 上方淡入，如果在单击时可以看到“Regular”或“Deep”，它们会淡出（无论如何，一次只能看到 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/

4

2 回答 2

0

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

#是用于 ids.的前缀，是用于类的前缀

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

此外，如果您的 div 被隐藏，您的图像可能不会显示。所以也许你的意思是使用$('#main_light_layover')而不是仅仅使用'light_layover'？

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

请参阅jQuery.load和jQuery.ready

于 2013-05-15T00:45:42.007 回答
0

删除点击功能中的 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');
});
 });
于 2013-05-15T00:34:43.297 回答