Question

我是Javascript的新手，我正在寻找有关重构以下代码以提高效率的建议。

代码执行以下操作： 1. 19张图片淡入，有各种延迟 2.当鼠标悬停在其中一个图像上时，该图像的说明将出现在屏幕顶部的div中。

任何帮助创建一个新的，更短的代码来完成同样的事情将非常有用，因为19个图像目前需要大量的JavaScript代码空间，如果没有更优雅的脚本我会感到惊讶完成同样的事情。

另外，我想在显示在窗口顶部的div添加淡入，但无法正确添加。

感谢您的时间和帮助。

HTML示例

<div id="arch">
    <div class="fade-in two-seven">
        <img src="myimage" />
    </div>
</div>
<!--Fade In Image-->
<div id="arch-con">
    <p>Some text</p>
</div>
<!--Top Screen div-->
<div id="bran">
    <div class="fade-in three-one">
        <img src="myimage" />
    </div>
</div>
<div id="bran-con">
    <p>Some text</p>
</div>
<div id="code">
    <div class="fade-in three-nine">
        <img src="myimage" ALT="" />
    </div>
</div>
<div id="code-con">
    <p>Some Text</p>
</div>

CSS示例

#arch {
    left: 25%;
    top: 27%;
    width: 14%;
    height: auto;
    visibility: visible;
    position: absolute;
}
#arch:hover {
    transform: scale(1.05);
}
#arch-con {
    width: 30%;
    height: 12%;
    position: absolute;
    background: rgba(0, 18, 150, 0.81) none repeat scroll 0% 0%;
    border: 4px solid #FFF;
    border-radius: 20px;
    display: none;
    line-height: 0px;
    padding: 11px;
    margin: 0px;
    left: 35%;
    text-align: center;
}
#arch-con p {
    color: white;
    font-size:120%
}
#bran {
    left: 44%;
    top: 27%;
    width: 18%;
    height: auto;
    visibility: visible;
    position: absolute;
}
#bran:hover {
    transform: scale(1.05);
}
#bran-con {
    width: 30%;
    height: 12%;
    position: absolute;
    background: rgba(0, 18, 150, 0.81) none repeat scroll 0% 0%;
    border: 4px solid #FFF;
    border-radius: 20px;
    display: none;
    line-height: 0px;
    padding: 11px;
    margin: 0px;
    left: 35%;
    text-align: center;
}
#bran-con p {
    color: white;
    font-size:120%
}
#code {
    left: 66%;
    top: 27%;
    width: 14.5%;
    height: auto;
    visibility: visible;
    position: absolute;
}
#code:hover {
    transform: scale(1.05);
}
#code-con {
    width: 30%;
    height: 12%;
    position: absolute;
    background: rgba(0, 18, 150, 0.81) none repeat scroll 0% 0%;
    border: 4px solid #FFF;
    border-radius: 20px;
    display: none;
    line-height: 0px;
    padding: 11px;
    margin: 0px;
    left: 35%;
    text-align: center;
}
#code-con p {
    color: white;
    font-size:120%
}

JavaScript示例

$(document).ready(function () {
    $("#arch").on("mouseenter", function () {
        $("#arch-con").show();
    }).on("mouseleave", function () {
        $("#arch-con").hide();
    });
});
$(document).ready(function () {
    $("#bran").on("mouseenter", function () {
        $("#bran-con").show();
    }).on("mouseleave", function () {
        $("#bran-con").hide();
    });
});
$(document).ready(function () {
    $("#code").on("mouseenter", function () {
        $("#code-con").show();
    }).on("mouseleave", function () {
        $("#code-con").hide();
    });
});

Answer 1

通过使用普通课程，您可以以更加干燥的方式实现您的需求：

<div id="arch" class="image-container">
    <div class="fade-in two-seven">
        <img src="myimage" />
    </div>
</div>
<div id="arch-con" class="text-container">
    <p>Some text</p>
</div>

<div id="bran" class="image-container">
    <div class="fade-in three-one">
        <img src="myimage" />
    </div>
</div>
<div id="bran-con" class="text-container">
    <p>Some text</p>
</div>

<div id="code" class="image-container">
    <div class="fade-in three-nine">
        <img src="myimage" ALT="" />
    </div>
</div>
<div id="code-con" class="text-container">
    <p>Some Text</p>
</div>

然后你可以在这个类的所有元素上使用相同的函数：

$(function() {
    $('.image-container').hover(function() {
        $(this).next('.text-container').toggle();
    });             
});

另请注意，您可以将hover()事件与toggle()一起使用，以进一步整理逻辑。

Example fiddle

Answer 2

创建一个与所有元素匹配的选择器，然后您可以使用next方法转到div来显示/隐藏：

$(document).ready(function(){

  $("#arch,#bran,#code").on("mouseenter", function() {
      $(this).next().show();
}).on("mouseleave", function() {
      $(this).next().hide();
  });

});

如果向所有div添加一个类，则选择器会变短。您也可以使用它来重用CSS中的代码。假设元素对上的类expimg和expimg-con的示例：

.expimg { height: auto; visibility: visible; position: absolute; }
.expimg:hover { transform: scale(1.05); }
.expimg-con { width: 30%; height: 12%; position: absolute; background: rgba(0, 18, 150, 0.81) none repeat scroll 0% 0%; border: 4px solid #FFF; border-radius: 20px; display: none; line-height: 0px; padding: 11px; margin: 0px; left: 35%; text-align: center; }
.expimg-con p {color: white; font-size:120%}

#arch { left: 25%; top: 27%; width: 14%; }
#bran { left: 44%; top: 27%; width: 18%; }
#code { left: 66%; top: 27%; width: 14.5%; }

Answer 3

首先，您只想拥有一个document.ready()。 According to the docs...

jQuery会为您检测这种准备状态。代码包含在里面 $（document）.ready（）只会运行一次页面Document Object 模型（DOM）已准备好执行JavaScript代码

所以：

$(document).ready(function(){
    alert('foo');
});

$(document).ready(function(){
    alert('bar');
});

相当于：

$(document).ready(function(){
    alert('foo');
    alert('bar');
});

..拥有多个文档准备好的陈述在技术上并不是错误的，但是你没有特定的理由，更好的经验法则是只使用一个。

其次，作为@Rory和@ Guffa正确答案的替代方案，您还可以通过使用jQuery选择器来完成所需的功能。

示例：

＆＃13;
＆＃13;
$('#foo, #bar, #baz').hover(function(){ var tarElem = '#' + $(this).attr('id') + "-con"; $(tarElem).toggle(); });
＆＃13;
.a{ width: 100px; height: 100px; background-color: steelblue; margin: 10px; display: inline-block; } .b{ width: 100px; height: 100px; background-color: pink; margin: 10px; display: none; }
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="a" id="foo">Foo</div> <div class="a" id="bar">Bar</div> <div class="a" id="baz">Baz</div> <div class="b" id="foo-con">Foo-con</div> <div class="b" id="bar-con">Bar-con</div> <div class="b" id="baz-con">Baz-con</div>
＆＃13;
＆＃13;
＆＃13;

JavaScript代码重构和fadeIn属性

3 个答案: