javascript - 向数组中的每个元素添加一个类？

Question

我希望仅使用纯 JavaScript 向数组中的每个元素添加一个类。我对此的需要是因为我所拥有的应用程序为我提供了“非常”有限的 html 编辑功能。

My Goal

" Is to emulate radio buttons by using checkboxes. "

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

本质上，我意识到我需要的是循环 - //.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.

NOTE 04 Oct:

classList.add('class') isn't supported by all browsers indeed. The element.setAttribute('class', 'here_the_class'); is better supported.

– Camille Sébastien Niessen

<小时/>

NOTE 05 Oct:

For those that find this thread in passing, if you're interested in the finished result, you can find an updated 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>