如何使此jQuery代碼更簡潔高效？

Question

我從事投資組合已有一段時間了。 我需要很長時間才能擁有完成該技能所需的技能，但是在找到一些技巧之后，我會回去繼續工作。

現在，我已經完成了移動導航。 它可以按我希望的方式工作，但是涉及的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當然是裝飾品。

如何用更少的代碼獲得相同的結果？

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

您不需要所有這些變量，也將其刪除。

希望能幫助到你。

問候。

Answer 2

嗨，你可以這樣

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

但這是可選的

周末愉快

Answer 3

從我的角度來看，Mario Araque做到了最好。 我還將添加停止功能，例如：

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

這將清除淡入隊列，並且懸停效果僅出現一次！