为数组中的每个元素添加一个类？

Question

我正在寻找为我使用纯javascript的数组中的每个元素添加一个类。我对此的需求是因为我的应用程序给了我'very'有限的html编辑功能。

  

我的目标

     

“是使用复选框模拟单选按钮。”

要做到这一点，我需要为我想要定位的所有元素添加一个uniqe类句柄，以免错误地拾取任何其他元素。只有这样我才能开始操纵他们的行为。

基本上我意识到我需要循环 - // .classList.add("chkbox");通过数组应用.chkbox到其中的每个元素。

唯一的问题是，我不确定最好的方法。我做了一些挖掘，找不到任何与我正在寻找的东西相匹配的东西。 “但是，我确实找到了关于数组的这个方便的花花公子here！”

我想我理解如何遍历数组，但我如何单独定位元素呢？

// Place elements within an array ...
var a = document.getElementsByTagName("input");
var b = []; // Contains all checkboxes ...
for (var i = 0; i < a.length; i++) {
  if (a[i].type == "checkbox") {
    b.push(a[i]);
  }
};

console.log(a);
console.log(b);

// .classList.add("classToBeAdded");

• JS FIDDLE

我不太喜欢JS，所以我对这个问题的任何帮助都会很棒，我会提前感谢。

此致 - B.

  

10月04日注意事项

     

所有浏览器都不支持classList.add（'class'）   确实。 element.setAttribute（'class'，'here_the_class'）;更好   支持的。

     

- CamilleSébastienNiessen

  

10月05日注：

     

对于那些经常发现这个帖子的人，如果你对此感兴趣的话   完成结果后，您可以找到更新的Jsfiddle here 。

     

- Beaniie

Answer 1

这应该这样做

[].forEach.call(b, function(el) {
    el.classList.add("chkbox");
});

代码片段：

// Place elements within an array ...
var a = document.getElementsByTagName("input");
var b = []; // Contains all checkboxes ...
for (var i = 0; i < a.length; i++) {
  if (a[i].type == "checkbox") {
    b.push(a[i]);
  }
};

[].forEach.call(b, function(el) {
	el.classList.add("chkbox");
});

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
* {
  margin: 0;
  padding: 0;
}

h3 {
  color: #fff !important;
  padding-left: 0 !important;
}

#txt-field {
  position: relative;
  height: 100vh;
}

#col {
  width: 40%;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.spacer {
  margin-bottom: .5em;
}

.original {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%), url(http://imageshack.com/a/img661/3954/bwalqa.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.txt {
  font-family: "Open Sans", Arial, Helvetica, sans-serif !important;
  font-weight: 200 !important;
  letter-spacing: 4px !important;
  font-size: 26px !important;
  text-transform: uppercase;
  color: #272727;
  padding: .5em;
}

.stretch {
  box-sizing: border-box;
  width: 100%;
}

.shift {
  margin-top: 9%;
}

.boxes {
  box-sizing: border-box;
  width: 100%;
  margin: auto;
  padding: 1.5em;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 100%);
  margin-top: 1.5em;
}


/*Checkboxes styles*/

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"] + label {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 20px;
  font: 14px/20px 'Open Sans', Arial, sans-serif;
  color: #ddd;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

input[type="checkbox"] + label:last-child {
  margin-bottom: 0;
}

input[type="checkbox"] + label:before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border: 1px solid #6cc0e5;
  position: absolute;
  left: 0;
  top: 0;
  opacity: .6;
  -webkit-transition: all .12s, border-color .08s;
  transition: all .12s, border-color .08s;
}

input[type="checkbox"]:checked + label:before {
  width: 10px;
  top: -5px;
  left: 5px;
  border-radius: 0;
  opacity: 1;
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

<div id="txt-field" class="original box">

  <div id="col">

    <h3 class="txt spacer">Checkboxes acting like radio buttons...</h3>

    <div class="boxes">
      <input type="checkbox" id="box-1" checked>
      <label for="box-1">Option One</label>
    </div>
    <div class="boxes">
      <input type="checkbox" id="box-2">
      <label for="box-2">Option Two</label>
    </div>
    <div class="boxes">
      <input type="checkbox" id="box-3">
      <label for="box-3">Option Three</label>
    </div>
    <div class="boxes">
      <input type="checkbox" id="box-4">
      <label for="box-4">Option Four</label>
    </div>
  </div>
</div>

Answer 2

您可以在for循环中添加类列表，如下所示：

// Place elements within an array ...
var a = document.getElementsByTagName("input");
var b = []; // Contains all checkboxes ...
for (var i = 0; i < a.length; i++) {
  if (a[i].type == "checkbox") {
    a[i].setAttribute("class", "classToBeAdded"); 
    b.push(a[i]);
  }
};

在你的小提琴中测试它似乎工作

Answer 3

逻辑非常简单。当复选框选中时，您可以遍历复选框列表以取消选中。然后，选中单击的复选框。

修改：不确定您要对 chkbox 类做什么。如果要选中CSS复选复选框，可以使用CSS伪类选择器:checked。例如：

.boxes > input[type="checkbox"]:checked {
  /* CSS here */
}

// Place elements within an array ...
var a = document.getElementsByTagName("input");
var b = []; // Contains all checkboxes ...
for (var i = 0; i < a.length; i++) {
  if (a[i].type == "checkbox") {
    b.push(a[i]);
  }
};

b.forEach(function (el) {
  el.addEventListener("change", function (ev) {
    b.forEach(function (innerEl) {
      innerEl.removeAttribute("checked");
    })
    el.setAttribute("checked", "checked");
  })
})

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
* {
  margin: 0;
  padding: 0;
}

h3 {
  color: #fff !important;
  padding-left: 0 !important;
}

#txt-field {
  position: relative;
  height: 100vh;
}

#col {
  width: 40%;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.spacer {
  margin-bottom: .5em;
}

.original {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%), url(http://imageshack.com/a/img661/3954/bwalqa.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.txt {
  font-family: "Open Sans", Arial, Helvetica, sans-serif !important;
  font-weight: 200 !important;
  letter-spacing: 4px !important;
  font-size: 26px !important;
  text-transform: uppercase;
  color: #272727;
  padding: .5em;
}

.stretch {
  box-sizing: border-box;
  width: 100%;
}

.shift {
  margin-top: 9%;
}

.boxes {
  box-sizing: border-box;
  width: 100%;
  margin: auto;
  padding: 1.5em;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 100%);
  margin-top: 1.5em;
}


/*Checkboxes styles*/

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"] + label {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 20px;
  font: 14px/20px 'Open Sans', Arial, sans-serif;
  color: #ddd;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

input[type="checkbox"] + label:last-child {
  margin-bottom: 0;
}

input[type="checkbox"] + label:before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border: 1px solid #6cc0e5;
  position: absolute;
  left: 0;
  top: 0;
  opacity: .6;
  -webkit-transition: all .12s, border-color .08s;
  transition: all .12s, border-color .08s;
}

input[type="checkbox"]:checked + label:before {
  width: 10px;
  top: -5px;
  left: 5px;
  border-radius: 0;
  opacity: 1;
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

<div id="txt-field" class="original box">

  <div id="col">

    <h3 class="txt spacer">Checkboxes acting like radio buttons...</h3>

    <div class="boxes">
      <input type="checkbox" id="box-1" checked="checked">
      <label for="box-1">Option One</label>
    </div>
    <div class="boxes">
      <input type="checkbox" id="box-2">
      <label for="box-2">Option Two</label>
    </div>
    <div class="boxes">
      <input type="checkbox" id="box-3">
      <label for="box-3">Option Three</label>
    </div>
    <div class="boxes">
      <input type="checkbox" id="box-4">
      <label for="box-4">Option Four</label>
    </div>
  </div>
</div>