[英]How can I make this jQuery code more concise and efficient?
I've been working on a portfolio for some time now. 我从事投资组合已有一段时间了。 It'll take a long time before I have the skills necessary to complete it, but I go back and work on it a little after I figure some tricks out. 我需要很长时间才能拥有完成该技能所需的技能,但是在找到一些技巧之后,我会回去继续工作。
Right now, I just have the mobile navigation done. 现在,我已经完成了移动导航。 It works how I want it to, but the jQuery code involved is a little lengthy. 它可以按我希望的方式工作,但是涉及的jQuery代码有点冗长。
Here is the relevant HTML: 以下是相关的HTML:
<header class="mobile-header">
<span>Menu</span>
<img src="img/nav-icon.png" id="pull">
</header>
<ul class="mobile-navigation">
<li>
<span class="ornament-left ornament1">N</span>
<a href="#" class="navLink1">Home</a>
<span class="ornament-right ornament1">N</span>
</li>
<li>
<span class="ornament-left ornament2">N</span>
<a href="#" class="navLink2">About</a>
<span class="ornament-right ornament2">N</span>
</li>
<li>
<span class="ornament-left ornament3">N</span>
<a href="#" class="navLink3">Work</a>
<span class="ornament-right ornament3">N</span>
</li>
<li>
<span class="ornament-left ornament4">N</span>
<a href="#" class="navLink4">Contact</a>
<span class="ornament-right ornament4">N</span>
</li>
</ul>
NOTE: The reason that there are random N's everywhere is that I downloaded an ornamental font and N is the ornament that I wanted. 注意:到处都是随机N的原因是我下载了装饰字体,而N是我想要的装饰。
Relevant jQuery: 相关jQuery:
$(function(){
var navLink1 = $('.navLink1')
navLink2 = $('.navLink2')
navLink3 = $('.navLink3')
navLink4 = $('.navLink4')
ornament1 = $('.ornament1')
ornament2 = $('.ornament2')
ornament3 = $('.ornament3')
ornament4 = $('.ornament4')
$(navLink1).hover(
function() {
ornament1.fadeTo('med', 1.0);
}, function() {
ornament1.fadeTo('med', 0);
}
);
$(navLink2).hover(
function() {
ornament2.fadeTo('med', 1.0);
}, function() {
ornament2.fadeTo('med', 0);
}
);
$(navLink3).hover(
function() {
ornament3.fadeTo('med', 1.0);
}, function() {
ornament3.fadeTo('med', 0);
}
);
$(navLink4).hover(
function() {
ornament4.fadeTo('med', 1.0);
}, function() {
ornament4.fadeTo('med', 0);
}
);
})
As you can tell, that jQuery takes up a lot of space. 如您所知,jQuery占用了大量空间。 I figure there's some way to use a counter to make it more efficient but I can't figure it out. 我认为有某种方法可以使用计数器来提高效率,但我无法弄清楚。
For a live demo of my site, take a look at this jsFiddle. 对于我的网站的实时演示,请看一下jsFiddle。
http://jsfiddle.net/n3wyde0h/ http://jsfiddle.net/n3wyde0h/
It's kind of rough, seeing as it's normally a dropdown menu that would slide down after clicking the menu icon that's not present in the JSfiddle, but you get the idea. 这有点粗糙,因为它通常是一个下拉菜单,单击JSfiddle中不存在的菜单图标后会向下滑动,但是您知道了。 Also, the N's would of course be ornaments. 而且,N当然是装饰品。
How do I get the same result with less code? 如何用更少的代码获得相同的结果?
You can merge all your events into one. 您可以将所有事件合并为一个。 For example this HTML: 例如,以下HTML:
<ul class="mobile-navigation">
<li>
<span class="ornament-left ornament">N</span>
<a href="#" class="navLink">Home</a>
<span class="ornament-right ornament">N</span>
</li>
<li>
<span class="ornament-left ornament">N</span>
<a href="#" class="navLink">About</a>
<span class="ornament-right ornament">N</span>
</li>
<li>
<span class="ornament-left ornament">N</span>
<a href="#" class="navLink">Work</a>
<span class="ornament-right ornament">N</span>
</li>
<li>
<span class="ornament-left ornament">N</span>
<a href="#" class="navLink">Contact</a>
<span class="ornament-right ornament">N</span>
</li>
</ul>
And the Javascript code: 和Javascript代码:
$(function(){
$('.navLink').hover(function() {
$(this).parents('li:first').find('.ornament').fadeTo('med', 1.0);
}, function() {
$(this).parents('li:first').find('.ornament').fadeTo('med', 0);
});
})
You don't need all this variables, also remove it. 您不需要所有这些变量,也将其删除。
Hope it helps. 希望能帮助到你。
Regards. 问候。
Hi you can do it like this 嗨,你可以这样
$(function(){
$('.navLink1', '.navLink2', '.navLink3', '.navLink4').hover{
// Get current id
var current_id_splitted = $(this).attr('id').split('navLink');
var current_id = current_id_splitted[1];
// Do the ornament
$('.ornament' + current_id)
.fadeTo('med', 1.0)
.fadeTo('med', 0);
}
})
And if you can update hour HTML by puting a navLink class for the 4 elements, 如果您可以通过为4个元素放置navLink类来更新小时HTML,
$(function(){
$('.navLink').hover{
// Get current id
var current_id_splitted = $(this).attr('id').split('navLink');
var current_id = current_id_splitted[1];
// Do the ornament
$('.ornament' + current_id)
.fadeTo('med', 1.0)
.fadeTo('med', 0);
}
})
But this is optional, 但这是可选的
Have a good weekend 周末愉快
Mario Araque is doing it best from my point of view. 从我的角度来看,Mario Araque做到了最好。 I would also add the stop function like: 我还将添加停止功能,例如:
$('.navLink').hover(
function () {
$(this).closest("li").find('.ornament').stop(true).fadeTo('med', 1.0);
}, function () {
$(this).closest("li").find('.ornament').stop(true).fadeTo('med', 0);
}
);
This will clear the fade queue and the hover effect appears only once! 这将清除淡入队列,并且悬停效果仅出现一次!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.