Question

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

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

我尝试了两种不同的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错误，并且未设置该类。

有人知道我在做什么错吗？

Answer 1

您正在遇到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');
    }
}

Answer 2

有一个元素本身可以执行这种操作：the radio button。这使得编写更简洁的解决方案变得更加容易（嗯，除了CSS，使它看起来更像一个按钮，但这是可选的）：

var buttons = Array.from(document.querySelectorAll(".group1 .button"));
buttons.forEach((el) => {
  el.addEventListener("click", function (e) {
    buttons.forEach((button) => button.classList.toggle("marked", button.querySelector("input").checked));
  });
});

/* Hide the radio button */
.button input { display: none; }
/* make it green when selected */
.button.marked { 
  background: green
}
/* make the label look more like a button */
.button { 
  font: caption;
  font-size: smaller;
  padding: 2px 6px;
  border: 1px solid #999;
  border-radius: 1px;
  background: white;
}
.button:hover {
  border-color: ThreeDDarkShadow;
}

<div class="group1">
    <label class="button"><input type="radio" name="pt_toggle">Incorrect</label>
    <label class="button"><input type="radio" name="pt_toggle">Partially correct</label>
    <label class="button"><input type="radio" name="pt_toggle">Correct</label>
</div>

Answer 3

点击添加“标记”类到您的按钮：

您的html：

<button onclick="Label(event)" class="pt_toggle">Incorrect</button>

您的js：

function Label(event) {
  event.target.classList.add("marked");
}

Javascript：选择其他

3 个答案: