时间戳

首页 > 解决方案 > Javascript：选择其他人

javascript - Javascript：选择其他人

问题描述

我正在开发一个 API，计划是用户在发出 POST 请求之前填写一个包含多个选项的简短清单。对于每个部分，用户可以获得多个选项/按钮，但只能选择其中一个。

选定的按钮将获得类marked（将背景颜色更改为绿色），而其他按钮保持白色（除非单击其中一个，在这种情况下它变为绿色而其他变为白色）

我尝试了两种不同的 Javascript 函数，但到目前为止，它们都无法使这种行为起作用。

尝试1：

function Label(self, group) {
  //    mark button
  let btns = document.getElementsByClassName(group);

  for (el in btns) {
      btns[el].classList.remove('marked') 
  }
  self.classList.add('marked');
}

尝试 2（更明确的检查是否self涉及）

function Label(self, group) {
      //    mark button
      let btns = document.getElementsByClassName(group);

      for (el in btns) {
          if (btns[el] !== self) {
              btns[el].classList.remove('marked')
          }

      }
      self.classList.add('marked');
    }

我的推理是首先.marked从所有元素中删除类，然后在this元素上设置它。由于在 HTML 中使用命令调用该函数，onclick它知道它是哪个元素。

<div class="group1">
    <button onclick="Label(this, pt_toggle)" class="pt_toggle">Incorrect</button>
    <button onclick="Label(this, pt_toggle)" class="pt_toggle">Partially correct</button>
    <button onclick="Label(this, pt_toggle)" class="pt_toggle">Correct</button>
</div>

但是，这些功能并没有像我希望的那样运行。它引发Uncaught TypeError: Cannot read property 'remove' of undefined错误并且未设置类。

有谁知道我做错了什么？

标签： javascript

解决方案

您遇到了for..in循环语法的一个特性。当你执行：

for (el in btns) {
    if (btns[el] !== self) {
        btns[el].classList.remove('marked');
    }
}

对象中的每个属性都btns将被迭代，包括length您无法从中删除类名的属性btns["length"]。

如果您切换到使用作为限制的普通for循环btns.length，您将不会迭代对象中的非按钮元素属性：

for (var el = 0; el < btns.length; el++) {
    if (btns[el] !== self) {
        btns[el].classList.remove('marked');
    }
}

推荐阅读