如何使这个jQuery代码更简洁高效?

时间:2014-09-12 22:31:10

标签: jquery

我一直在研究投资组合一段时间了。我需要很长时间才能掌握完成它所需的技能,但是在我想出一些技巧之后,我会再回过头来研究它。

现在,我刚刚完成了移动导航。它的工作原理我想要它,但涉及的jQuery代码有点冗长。

以下是相关的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>

注意:随处可见N的原因是我下载了一个观赏字体而N是我想要的装饰品。

相关的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);
        }
    );
})

正如您所知,jQuery占用了大量空间。我认为有一些方法可以使用计数器使其更有效但我无法弄明白。

对于我网站的现场演示,请看一下这个jsFiddle。

http://jsfiddle.net/n3wyde0h/

这有点粗糙,因为它通常是一个下拉菜单,在点击JSfiddle中没有的菜单图标后会滑下来,但你明白了。此外,N的当然是饰品。

如何用更少的代码获得相同的结果?

3 个答案:

答案 0 :(得分:1)

您可以将所有活动合并为一个。例如这个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>

和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);
   });
})

您不需要所有这些变量,也可以删除它。

希望它有所帮助。

问候。

答案 1 :(得分:1)

嗨,你可以这样做

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

如果您可以通过为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);
        }
    })

但这是可选的,

周末愉快

答案 2 :(得分:0)

马里奥·阿拉克从我的角度来看是最好的。我还会添加停止功能,如:

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

这将清除淡入淡出队列,悬停效果只出现一次!