Как предотвратить сохранение в глобальную переменную, чтобы знать последний нажатый переключатель?

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, чтобы иметь возможность отслеживать, есть ли выбранный элемент? Моя первоначальная идея - сохранить его в фиктивную переменную в объекте body. нравится использовать это.

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

Мне было интересно, правильная ли это стратегия для этого. Также, чтобы сделать код по-настоящему ненавязчивым, мне нужно добавить обработчик событий для загрузки для инициализации глобальной переменной.

Answer 1

Идеально было бы, когда вы назначали обработчики событий внутри скрипта, не используя атрибуты onclick. Тогда вы можете хранить все в отдельной области видимости.

Теперь вы также можете сохранить переменную в отдельной области видимости, но функция rowSelected / selectRow все равно должна оставаться в глобальной области видимости.

КСТАТИ. вместо сохранения идентификатора вы можете сохранить ссылку на сам узел.

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;
   }
})();

Answer 2

Не могли бы вы просто проверить имя класса тега td и посмотреть, является ли он классом selectRow, а затем изменить его, если он есть?