jQuery的 - 使全部隐藏/显示这个div图像更通用

StackOverflow https://stackoverflow.com/questions/353772

  •  20-08-2019
  •  | 
  •  

题

我有以下jQuery代码。

基本上我将有几个重叠的div和对所有那些重叠的div右侧链接列表。悬停在一个链路时，链路的分配的div会褪色英寸

我有下面的代码和它的作品（它使用默认的Windows的样品图片），但如果有人能想办法优化它或使它通用，我将不胜感激。

<html>

    

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

                   

结果

    显示日落     冬季展     显示蓝山     显示Waterlillies

感谢您马特，TM和克朗，你的反应确实帮助。

我不觉得我完全解释自己，但TM提供我一直在寻找的答案。

我想跟着干，所提供的代码TM帮我最好的这个时候，因为它并不需要为我改变我的标记，只是jQuery代码。

再次非常感谢。其惊人我如何迅速得到了答案。跟上伟大的工作。

有帮助吗？

解决方案

你可以做的第一件事情，使它更清洁的替代的东西更通用的所有这些类似的电话。

（注意：假设这一切是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);
});

使用逗号分隔的选择器是服从DRY与jQuery的好方法。

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

此外，仅仅是一个更清洁的视觉外观，可以使用以下的$(document).ready()的地方，如果你喜欢它。这是完全一样的东西，只是不同的语法。

$(function() {
   //DOM ready
};

其他提示

我在几个月前回答过类似的问题 jQuery的交换来实现要素中是否有帮助。

马特

Clarrification，在那里我有{ID：“1”}你应该在你要显示，并在其他分区的一个泛型类的名称隐藏起来的div ID交换

。

Remeber可应用于多张类的元素：

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

如果您有连接到原来的div样式规则可能有所帮助。

这是很好的，但你需要一个更通用的方法来你分配的ID。

这想到的最快的解决办法是包裹起来的是淡入下一个父格“#wrapped”重叠的div。采取的所有链接，并为它们分配CSS类“触发器名”，其中“NAME”是“夕阳‘冬天’，等等，那么你可以这样做：


   $(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);
      });

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top