마지막으로 클릭 한 라디오 버튼을 알기 위해 전역 변수에 저장하는 것을 방지하려면 어떻게해야합니까?

Question

라디오 단추 선택기를 사용하여 표를 구현하려고합니다. 라디오 버튼을 클릭하면 행이 다른 색으로 설정됩니다. 또한 그리드에서 라디오를 선택하면 이전에 선택한 라디오 버튼이 있는지 확인하여 색상 세트를 변경할 수 있습니다. 내가 전역 변수에 대한 종속성을 제거 할 수 방법

<script type="text/javascript"> 
var lastSelectedId = ''; 
function rowSelected(rdoButton) { 

    if (rdoButton.id != lastSelectedId) { 
    rdoButton.parentNode.parentNode.origClassName = 
     rdoButton.parentNode.parentNode.className; 
    rdoButton.parentNode.parentNode.className = 'rowSelected'; 

    if (lastSelectedId != '') { 
     var lastRadioButton = document.getElementById(lastSelectedId); 
     lastRadioButton.parentNode.parentNode.className = 
     lastRadioButton.parentNode.parentNode.origClassName; 
    } 
    } 
    lastSelectedId = rdoButton.id; 
} 
</script> 

<table> 
    <tr class="rowOdd"> 
    <td> 
     <input type="radio" name="rdoGrpName" id="rdoId1" onclick="rowSelected(this);" /> 
    </td> 
    <td>Blah</td> 
    </tr> 
    <tr class="rowEven"> 
    <td> 
     <input type="radio" name="rdoGrpName" id="rdoId1" onclick="rowSelected(this);" /> 
    </td> 
    <td>Blah</td> 
    </tr> 
</table> 

궁금 선택된 항목이있는 경우에 추적 할 수 lastSelectedId? 내 초기 아이디어는 본문 개체의 더미 변수에 저장하는 것입니다. 이것을 사용하십시오.

function rowSelected(rdoButton) { 
    var mainBody = document.getElementByNames('body'); 
    if (rdoButton.id != mainBody[0].lastSelectedId) { 
    // .... 
    } 
} 

이것이 올바른 전략인지 궁금합니다. 또한 코드를 실제로 방해하지 않으려면 onload에 대한 이벤트 처리기를 추가하여 전역 변수를 초기화해야합니다.

Answer 1

td 태그의 클래스 이름을 확인하고 selectRow 클래스인지 확인한 다음 변경하십시오.

Answer 2

onclick 특성을 사용하지 않고 스크립트 내에서 이벤트 처리기를 할당하면 완벽 할 수 있습니다. 그런 다음 모든 것을 별도의 범위에 저장할 수 있습니다.

이제 변수를 별도의 범위에 저장할 수도 있지만 rowSelected/selectRow 함수는 전역 범위에 있어야합니다.

BTW. ID를 저장하는 대신 노드 자체에 대한 참조를 저장할 수 있습니다.

var selectRow = (function(){ 
    var lastSelected, lastClass; 

    return function(rdoButton){ 
     var p; 
     if (rdoButton != lastSelected) { 
     if (lastSelected) { 
      p = lastSelected.parentNode.parentNode; 
      p.className = lastClass; 
     } 
     p = rdoButton.parentNode.parentNode; 
     lastClass = p.className; 
     p.className = 'rowSelected'; 
     } 
     lastSelected = rdoButton; 
    } 
})();