如何縮短這個加載jQuery？

Question

我對jQuery非常好，但是當我得到這樣的東西時，我需要一些幫助。

所以我想縮短這段代碼：

$(function() {
$('#experience_nav').click(function() {
    $('#contentWrap').load('files.html #content_experience', function() {
        $(this).hide().fadeIn();
        $('#content_experience').siblings().fadeOut();
    });

    return false;
});
$('#aboutme_nav').click(function() {
    $('#contentWrap').load('files.html #content_aboutme', function() {
        $(this).hide().fadeIn();
        $('#content_aboutme').siblings().fadeOut();
    });

    return false;
});
$('#recentclients_nav').click(function() {
    $('#contentWrap').load('files.html #content_recentclients', function() {
        $(this).hide().fadeIn();
        $('#content_recentclients').siblings().fadeOut();
    });

    return false;
});
$('#contactme_nav').click(function() {
    $('#contentWrap').load('files.html #content_contactme', function() {
        $(this).hide().fadeIn();
        $('#content_contactme').siblings().fadeOut();
    });

    return false;
});

});

所以我基本上不必為每個不同的實例調用相同的東西。

任何幫助都很棒！ 即使只是告訴我它無法完成！ :-)

Answer 1

// All <a>s wich the ID ends with '_nav'
$('a[id$="_nav"]').click(function() {
    var nav = $(this).attr('id').replace('_nav', '');

    $('#contentWrap').load('files.html #content_' + nav, function() {
        $(this).hide().fadeIn();
        $('#content_' + nav).siblings().fadeOut();
    });

    return false;
})

Answer 2

試試這個，利用你的命名方案：

$('#experience_nav, #aboutme_nav, #recentclients_nav, #contactme_nav').click(function() {
    var id = '#content_' + $(this).attr('id').replace("_nav","");
    $('#contentWrap').load('files.html ' + id, function() {
        $(this).hide().fadeIn();
        $(id).siblings().fadeOut();
    });
    return false;
});

或者，盡可能輕量級，因為它連接了多次：

$('[id$=_nav]').live('click', function() {
    var id = '#content_' + $(this).attr('id').replace("_nav","");
    $('#contentWrap').load('files.html ' + id, function() {
        $(this).hide().fadeIn();
        $(id).siblings().fadeOut();
    });
    return false;
});