jquery綁定一個事件到一個類，或類似的東西？

Question

我想將一個事件綁定到一個類，或者我在下面發佈的冗餘代碼的任何替代方法。有任何想法嗎？

感謝， MNA

 
(function(){ 
    $("button", "body").button(); 
    var submenu=false; 

    $("#about").click(function() { 
    $("#content").fadeOut(1000); 
    $("#content").load('about.html'); 
    $("#content").fadeIn(1000); 
    }); 

    $("#community").click(function() { 
    $("#content").fadeOut(1000); 
    $("#content").load('community.html'); 
    $("#content").fadeIn(1000); 
    }); 

    $("#store").click(function() { 
    $("#content").fadeOut(1000); 
    $("#content").load('store.html'); 
    $("#content").fadeIn(1000); 
    }); 

    $("#projects").click(function() { 
    $("#content").fadeOut(1000); 
    $("#content").load('projects.html'); 
    $("#content").fadeIn(1000); 
    }); 
}); 

Answer 1

要麼使用multiple selector

$("#about, #community, #store, #projects").click(function() { 
    $("#content").fadeOut(1000) 
       .load(this.id + '.html') 
       .fadeIn(1000); 
}); 

或給這些元素在同一類，並使用

$('.classname').click(...); 

更新：

我已經看到@pointy有一個好點，但他刪除了他的答案：你可能想爲fadeOut，load，fadeIn接連發生。那麼你必須把它們放在回調中：

$("#content").fadeOut(1000, function() { 
    $(this).load(this.id + '.html', function() { 
     $(this).fadeIn(1000); 
    }) 
}); 

查看他們的文檔以獲取更多信息。

Answer 2

這個怎麼樣？

將類load-content設置爲您要將click事件綁定到的所有元素。

(function(){ 
    $("button, body").button(); 
    var submenu=false; 

    $(".load-content").click(function() { 
     $("#content").fadeOut(1000).load(this.id+'.html').fadeIn(1000); 
    }); 
});