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

javascript:选择其他

javascript

Jasper · 技术社区 · 7 年前

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

所选按钮将获取类 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 元素。当函数被调用时, onclick 命令在HTML中,它知道它是哪个元素。

<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 错误,未设置类。

有人知道我做错了什么吗?

3 回复 | 直到 7 年前

Jonathan Michalik 7 年前

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

Heretic Monkey goproxy.dev 7 年前

the radio button

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>

dotnetdev4president 7 年前

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

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

5 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

5 月前

Alex · 在轻量级中同时解构和不解构变量

5 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

5 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

5 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

5 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

5 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

5 月前

user3472810 · Angular@Output/EventEmitter返回undefined

5 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

5 月前