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

어때?

click 이벤트를 바인딩 할 모든 요소에 대해 load-content 클래스를 설정하십시오.

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

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