代码之家 › 专栏 › 技术社区 › Nap

如何防止保存在全局变量中以了解上次单击的单选按钮?

radio-button select javascript

Nap · 技术社区 · 15 年前

我正在尝试使用单选按钮选择器实现网格。单击单选按钮时,行将设置为其他颜色。此外,当在网格中选择一个单选按钮时,它需要查看是否有以前选择的单选按钮,以便它可以更改颜色集。

<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) {
    // ....
  }
}

我想知道这是否是正确的策略。另外,为了使代码真正不被干扰,我需要为onload添加事件处理程序来初始化全局变量。

2 回复 | 直到 15 年前

Rafael 15 年前

如果您在脚本中分配事件处理程序,而不是使用onclick属性,这将是完美的。然后您可以将所有内容存储在一个单独的范围中。

现在,您还可以将变量存储在单独的作用域中,但是rowselected/selectrow函数仍然必须保留在全局作用域中。

顺便说一句,您可以存储对节点本身的引用,而不是保存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;
   }
})();