jquery binden ein Ereignis an eine Klasse oder etwas mit dem gleichen Effekt?

Question

Ich möchte ein Ereignis an eine Klasse binden oder eine Alternative zu dem redundanten Code, den ich unten veröffentlicht habe. Irgendwelche Ideen?

Dank, 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

Entweder die

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

multiple selector verwenden oder diese Elemente die gleiche Klasse geben und

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

Update verwenden:

Ich habe gesehen, dass @pointy einen guten Punkt hatte, aber er löschte seine Antwort: Sie wollen wahrscheinlich für fadeOut, load, fadeIn nacheinander auftreten. Dann müssen Sie sie in Rückrufe setzen:

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

Siehe ihre Dokumentation für weitere Informationen.

Answer 2

Wie wäre es damit?

Setzen Sie die Klasse load-content auf alle Elemente, an die das Ereignis click gebunden werden soll.

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

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