jQuery .hover方法和函数效率

I currently have a working jsfiddle

我目前有一个工作的jsfiddle

I'm curious as to how the jQuery code could be cleaned up to be more efficient, if possible. I'm a novice JavaScript/jQuery coder (as one could tell), and being more of a visual person and interactive learner, I feel that this is paramount to learning the way(s) the languages are written.

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

In short, instead of duplicating the .hover method each time that I need .fadeIn to fade in a div could there be a way to create a variable that contains the entire function?

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

Here's the code:

这是代码:

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

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

Thanks in advance,

提前致谢,

2 个解决方案

#1

You can amend your code using DRY (Don't Repeat Yourself) principles to shorten it.

您可以使用DRY(不要重复自己)原则来修改代码以缩短它。

Firstly, use common classes to group elements together, only putting id attributes on those which need unique settings:

首先,使用公共类将元素组合在一起,只将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>

You can then simplify your CSS too, given these classes:

然后,您可以使用以下类来简化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');
}

Finally, you can use a single click handler linked to those classes to do the work for you. You can join the a element to the relevant .reveal div via its index():

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

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

Working example

#2

You can store a function into a variable in JS

您可以将函数存储到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

#1