JavaScript의 멋진 변수

Question

Smarty를 사용하여 만든 사이트를 업데이트하려고합니다. 이 페이지는 회원의 이름을 클릭하면 회원의 세부 정보가 공개되는 회원 디렉토리입니다. 그러나이 페이지를 만든 사람은 이것을 달성하기 위해 인라인 onClick 이벤트를 사용했습니다. 몇 백 회원, 반복 코드의 많은 것 같아 :

<a href="#" class="expand" 
onClick="document.getElementById('detailsbox-{$member.member_id}').innerHTML = 
document.getElementById('details_'+{$member.member_id}).innerHTML; 
document.getElementById('divStayTopLeft-{$member.member_id}').style.display='block'; 
document.getElementById('summary-{$member.member_id}').style.display='none';return false; 
"> 

내가 함수로 떨어지고, 페이지가 출력 될 때 onClick로하지만, 물론 {member_id}이 하나의 수를 돌려 호출 시도 . 그래서 모든 회원은 하나의 회원 아이디로 모든 링크가 열리고 닫힙니다.

Smarty 변수를 자바 스크립트 변수로 변경 한 다음 onClick 이벤트에서 올바른 자바 스크립트 변수를 올바른 회원 ID로 설정해야한다고 생각하지만 자바 스크립트를 잘 이해하지 못합니다. 모든 팁 (또는 솔직한 솔루션)?

감사합니다, 스콧

Answer 1

당신은 아마 전역 네임 스페이스에서 그것을 얻을 및 마크 업 가능한 경우에서 이벤트 바인딩을하는 개체 또는 다른 구조로 자바 스크립트 함수를 넣고 싶지만 것 그것들을 숙제 문제로 남겨 둘 것입니다.

자바 스크립트 :

function foo(member_id) { 
    document.getElementById('detailsbox-' + member_id).innerHTML = 
     document.getElementById('details_' + member_id).innerHTML; 
    document.getElementById('divStayTopLeft-' + member_id).style.display = 'block'; 
    document.getElementById('summary-' + member_id).style.display = 'none'; 
    return false; 
} 

HTML/TPL : 향후 참조를 위해

<a href="#" class="expand" onClick="return foo({$member.member_id});">