1

我有以下 jquery 代码。

基本上我将有几个重叠的 div 和所有这些重叠 div 右侧的链接列表。将鼠标悬停在链接上时，链接分配的 div 将淡入。

我有以下代码并且它可以工作（它使用默认窗口的示例图片），但如果有人能想到一种优化它或使其通用的方法，我将不胜感激。

<html>
<head>
    <script type="text/javascript" src="jquery-1.2.6.min.js"></script>

    <script type="text/javascript">
       $(document).ready(function() {

          $("#trigger1").mouseover(function() {

            $(".contentdiv").addClass("inactive");
            $("#divsunset").removeClass("inactive");
            $(".inactive").fadeOut(500);
            $("#divsunset").fadeIn(500);
          });


          $("#trigger2").mouseover(function() {

            $(".contentdiv").addClass("inactive");
            $("#divwinter").removeClass("inactive");
            $(".inactive").fadeOut(500);
            $("#divwinter").fadeIn(500);

          });

          $("#trigger3").mouseover(function() {

            $(".contentdiv").addClass("inactive");
            $("#divbh").removeClass("inactive");
            $(".inactive").fadeOut(500);
            $("#divbh").fadeIn(500);

          });

          $("#trigger4").mouseover(function() {

            $(".contentdiv").addClass("inactive");
            $("#divwl").removeClass("inactive");
            $(".inactive").fadeOut(500);
            $("#divwl").fadeIn(500);

          });

        });

    </script>


    <style>
        #divsunset
        {
          position: absolute;
          top: 5px;
          left: 5px;
        }
        #divwinter
        {
          position: absolute;
          top: 5px;
          left: 5px;
        }
        #divbh
        {
          position: absolute;
          top: 5px;
          left: 5px;
        }
        #divwl
        {
          position: absolute;
          top: 5px;
          left: 5px;
        }
        #links
        {
          position: absolute;
          top: 800px;
          left: 700px;
        }
        .inactive
        {
        }
    </style>
</head>
<body>

<div id="divsunset" class="contentdiv">
    <img src="Sunset.jpg" />
</div>

<div id="divwinter" class="contentdiv">
    <img src="Winter.jpg" />
</div>

<div id="divbh" class="contentdiv">
    <img src="bh.jpg" />
</div>


<div id="divwl" class="contentdiv">
    <img src="wl.jpg" />
</div>



<br />
<div id="links">
    <a href="#" id="trigger1">Show Sunset</a>
    <a href="#" id="trigger2">Show Winter</a>
    <a href="#" id="trigger3">Show Blue Hills</a>
    <a href="#" id="trigger4">Show Waterlillies</a>
</div>

</body>
</html>

谢谢 Matt、TM 和 kRON，您的回复真的很有帮助。

我觉得我没有完全解释自己，但 TM 提供了我正在寻找的答案。

我想关注 DRY，这次 TM 提供的代码对我的帮助最大，因为它不需要我更改我的标记，只需要更改 jQuery 代码。

再次，非常感谢。我得到答案的速度之快令人惊讶。继续伟大的工作。

4

3 回答 3

6

你可以做的第一件事就是让它更干净，用更通用的东西替换所有这些类似的调用。

（注意：假设所有这些都在里面document.ready()）

$('#trigger1').data('target', '#divsunset');
$('#trigger2').data('target', '#divwinter');
$('#trigger3').data('target', '#divbh');
$('#trigger4').data('target', '#divwl');
$('#trigger1,#trigger2,#trigger3,#trigger4').mouseover(function() {
    var selector = $(this).data('target');
    $(".contentdiv").addClass("inactive");
    $(selector).removeClass("inactive");
    $(".inactive").fadeOut(500);
    $(selector).fadeIn(500);
});

使用逗号分隔的选择器是遵循 jQuery 的 DRY 的好方法。

我$(element).data()用来设置和检索元素上的一些数据，在这种情况下，选择器用于更新适当的元素。

$(document).ready()此外，为了更清晰的视觉外观，如果您愿意，可以使用以下内容代替。这是完全相同的东西，只是语法不同。

$(function() {
   //DOM ready
};
于 2008-12-09T18:52:34.380 回答
1

几个月前我回答了一个类似的问题jQuery Swapping Elements如果有帮助的话。

马特

澄清，我有 {id:'1'} 你应该交换你想要显示的 div 的 id 并在其他 DIV 上创建一个通用类名来隐藏它们。

请记住，您可以将多个类应用于一个元素：

<Div class="name1 name2"></div>

如果您将样式规则附加到原始 div，这可能会有所帮助。

于 2008-12-09T19:06:24.850 回答
0

这很好，但是您需要一种更通用的方法来处理您分配的 id。

想到的最快解决方案是将淡入的重叠 div 包裹在父 div“#wrapped”下。获取所有链接并为其分配 CSS 类“触发器名称”，其中“名称”是“日落”、“冬季”等。然后您可以执行以下操作：


   $(document).ready(function() {

      $(".trigger").mouseover(function() {

                $(".contentdiv").addClass("inactive");
                $("#wrapper ." + $(this).attr('class')[1]).removeClass("inactive");
                $(".inactive").fadeOut(500);
        $("#wrapper ." + $(this).attr('class')[1]).fadeIn(500);
      });

这不是最好的解决方案，但希望它能给你一个想法。

于 2008-12-09T19:01:23.613 回答