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

我想知道这是否是正确的策略。为了使代码真正不引人注意，我需要为onload添加事件处理程序来初始化全局变量。

Answer 1

难道你不能只检查td标签的类名，看看它是否是selectRow类，如果是的话就改变它？

Answer 2

当你在脚本中分配事件处理程序而不是使用onclick属性时，它是完美的。然后，您可以将所有内容存储在单独的范围内。

现在，您也可以将变量存储在separete范围内，但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;
   }
})();

如何防止保存全局变量以了解最后点击的单选按钮？

2 个答案: