jQuery를 다음 코드로 일어나는 뭐죠 범위

Question

난 그냥 jQuery를 배우기 시작했지만 예제가 많은 나에게 도움이되지 않습니다 ... 이제

은 내가 각각에 대한 링크를 사용하여 전환 할 4 개 형태를 가지고 . 하지만 내가 알 수없는 것은 첫 번째 함수에서 변수 "postOptionSelected"를 가져 와서 더 많은 사용자 옵션을 표시하는 다른 함수로 전달하는 방법입니다. 변수가 범위가 아니라는 것을 알지만 어떻게해야합니까?

$(document).ready(function(){ 

$("#postOptions ul li a").click(function(event){ 
     var postOptionSelected = $(this).parent("li").attr("class").substr(11); 
     $("form#post"+postOptionSelected).css('display', 'block'); 
     $("form.postForm:not(#post"+postOptionSelected+")").css('display', 'none'); 
     event.preventDefault(); 
}); 

$("form#post"+postOptionSelected+" div#postMore"+postOptionSelected+" a").click(function(event){ 
    $("form#post"+postOptionSelected+" div#postMore"+postOptionSelected).css('display', 'none'); 
    $("form#post"+postOptionSelected+" div#postLess"+postOptionSelected).css('display', 'block'); 
    $("form#post"+postOptionSelected+" div#postView"+postOptionSelected).css('display', 'block'); 
    event.preventDefault(); 
}); 

$("form#post"+postOptionSelected+" div#postLess"+postOptionSelected+" a").click(function(event){ 
    $("form#post"+postOptionSelected+" div#postLess"+postOptionSelected).css('display', 'none'); 
    $("form#post"+postOptionSelected+" div#postMore"+postOptionSelected).css('display', 'block'); 
    $("form#post"+postOptionSelected+" div#postView"+postOptionSelected).css('display', 'none'); 
    event.preventDefault(); 
}); 

}); 

Answer 1

문제점은 가변적 인 범위가 아닙니다. 더 많거나 적은 클릭 핸들러는 사용자가 추가하거나 제거하지 않는 문제의 앵커에 항상 있기를 원합니다. 클릭 핸들러를 제거하지 않으려하지 않는 한 재미가 없습니다. 이 버전을 사용해보십시오. 관련 클래스는 ID뿐만 아니라 관련 DOM 요소에서 사용할 수 있어야합니다. 잘하면 그 의미를 알 수 있습니다. 또한 일부 작업의 jQuery 단축 버전을 사용하는 자유를 얻었습니다.

$(document).ready(function(){ 

    $("#postOptions ul li a").click(function(event){ 
     var sel = $(this).parent("li").attr("class").substr(11); 
     $("form#post"+sel).show(); 
     $("form.postForm:not(#post"+sel+")").hide(); 
     event.preventDefault(); 
    }); 

    $("form.post div.postMore a").click(function(event){ 
     $(this).hide(); 
     $(this).siblings('div.postLess').show(); 
     $(this).siblings('div.postView').show(); 
     event.preventDefault(); 
    }); 

    $("form.post div.postLess a").click(function(event){ 
     $(this).hide(); 
     $(this).siblings('div.postMore').show(); 
     $(this).siblings('div.postView').hide(); 
     event.preventDefault(); 
    }); 

});