Question

我目前有一个工作jsfiddle

如果可能的话，我很好奇如何清理jQuery代码以提高效率。我是一个新手JavaScript / jQuery编码器（正如人们所知道的那样），而且更像是一个视觉人和交互式学习者，我觉得这对于学习编写语言的方式至关重要。

简而言之，每次我需要.fadeIn淡入div时，有没有办法创建一个包含整个函数的变量，而不是重复.hover方法？

以下是代码：

$('.hover1').hover(function () {
    $('.reveal1').stop(true).fadeIn(400);
},

function () {
    $('.reveal1').stop(false).fadeOut();
});

提前致谢，

Answer 1

您可以使用DRY（不要重复自己）原则修改代码以缩短代码。

首先，使用通用类将元素组合在一起，只将id属性放在需要唯一设置的属性上：

<div class="links"> 
    <a class="hover" href="google.com">Link 1</a>
    <a class="hover" href="google.com">Link 2</a>
    <a class="hover" href="google.com">Link 3</a>
</div>

<div class="reveal" id="reveal1">test</div>
<div class="reveal" id="reveal2">test</div>
<div class="reveal" id="reveal3">test</div>

根据这些类，您可以简化CSS：

.reveal {
    display: none;
    background: url('http://www.gardenideas.com/images/content/lushLandscape.jpg');
    margin-top: 100px;
    padding: 35px;
    float: left;
    position: absolute;
    height: 25%;
    width: 25%;
    background-size: auto 100%;
    background-repeat: no-repeat;
}
#reveal1 {
    background-image: url('http://www.visual-arts-cork.com/images-paint/constable-haywain.jpg');
}
#reveal2 {
    background-image: url('http://www.gardenideas.com/images/content/lushLandscape.jpg');
}
#reveal3 {
    background-image: url('https://cdn.tutsplus.com/vector/uploads/legacy/tuts/13_Midnight_Grass/preview.jpg');
}

最后，您可以使用链接到这些类的单击处理程序来为您完成工作。您可以通过a将.reveal元素加入相关的index() div：

$('.hover').hover(function () {
    $('.reveal').eq($(this).index()).stop(true).fadeIn(400);
}, function () {
    $('.reveal').eq($(this).index()).stop(false).fadeOut();
});

Working example

Answer 2

您可以将函数存储到JS

中的变量中

    var func1=function(){
        $('.reveal1').stop(true).fadeIn(400);
    };

    var func2=function(){
        $('.reveal1').stop(false).fadeOut();
    };

function provideHfunc(e)
{
$(a).hover(func1,func2);
}

  provideHfunc('.hover1'); // use this single function everywhere for the same functionality

jQuery .hover方法和函数效率

2 个答案: