使用 getElementsByClassName 获取数组

Question

如何使用 getElementsByClassName 获取我的输入数组？有可能得到吗？因为我打算获取我输入的所有类名的数组并比较是否有相同的元素，如果数组中有相同的值，它会提醒用户他们输入了无效输入，有点像验证.这是我的代码。

<table class="table table-responsive table-striped table-hover ">
    <thead>
        <tr>
            <th>#</th>
            <th colspan='2'>L</th>
            <th colspan='2'>O</th>
            <th colspan='2'>G</th>
            <th colspan='2'>B</th>
        </tr>
    </thead>
    <tbody>
        <tr class="info">
            <td width="30px">1</td>
            <td width="200px">Likes Authority</td>
            <td  width="75px;">
                <select class="r1" style="position: absolute; z-index:9999;"
                    onmouseover="this.size=this.options.length"
                    onmouseout="this.size=1" onchange="this.size=1"  name="qtyL" >  
                    <option value="0">-</option>
                    <option value="1" >1</option>
                    <option value="2" >2</option>
                    <option value="3" >3</option>
                    <option value="4" >4</option>
                </select>
            </td>
            <td  width="200px">Enthusiastic</td>
            <td  width="75px;"> 
                <select class="r1" style="position: absolute; z-index:9999;"
                    onmouseover="this.size=this.options.length"
                    onmouseout="this.size=1" onchange="this.size=1"  name="qtyO" >  
                    <option value="0">-</option>
                    <option value="1" >1</option>
                    <option value="2" >2</option>
                    <option value="3" >3</option>
                    <option value="4" >4</option>
                </select>
            </td>
            <td width="200px">Sensitive Feelings</td>
            <td width="75px;">
                <select class="r1" style="position: absolute; z-index:9999; "
                    onmouseover="this.size=this.options.length"
                    onmouseout="this.size=1" onchange="this.size=1"  name="qtyG" >  
                    <option value="0">-</option>
                    <option value="1" >1</option>
                    <option value="2" >2</option>
                    <option value="3" >3</option>
                    <option value="4" >4</option>
                </select>
            </td>
            <td  width="180px">Likes Instructions</td>
            <td width="75px;">
                <select class="r1" style="position: absolute; z-index:9999; "
                    onmouseover="this.size=this.options.length"
                    onmouseout="this.size=1" onchange="this.size=1"  name="qtyB" >  
                    <option value="0">-</option>
                    <option value="1" >1</option>
                    <option value="2" >2</option>
                    <option value="3" >3</option>
                    <option value="4" >4</option>
                </select>
            </td>
        </tr>
    </tbody>
</table>

<script>
function validateNresult()
{
    var totr1=document.getElementById("totalr1").value;

    var arr1=document.getElementsByClassName("r1");

    var allr1=arr1.value;

    Array.prototype.allValuesSame = function() 
    {
       for(var i = 1; i < this.length; i++)
       {
          if(this[i] !== this[0])
            alert("Invalid input");
       }
      return true;
    }

    var checkarr1=allr1.allValuesSame();

}

也许我的逻辑是错误的，但重要的部分是如何获取类名的所有值，即r1？谢谢。

Answer 1

var arr1=document.getElementsByClassName("r1");

这returns一个NodeList对象。 NodeList 对象表示节点的集合。

var allr1=arr1.value;

这毫无意义。您应该遍历此对象，然后比较其项的值。

for (var i = 0; i < arr1.length; i++) {
    console.log(arr1[i].value);
}

Answer 2

var v = document.getElementsByClassName('r1');
var len = v.length - 1;
var val = v[0].value;
var same = true;
while(len > 0)
{
    if (val != v[len].value)
    {
        same = false;
        break;
    }
    len--;
}

Answer 3

更新

为了更进一步，我补充道：

A <form> 我们将更改事件注册到 addEventListener()
当一个新值被添加到任何 <input> 回调（在事件上调用的函数的奇特名称）时，indexOf() 方法将尝试找到新值与先前创建的数组值之间的匹配。
如果匹配，则会触发警报，如果不匹配，则返回 false（基本上它不会做任何事情，直到在任何输入的数量）。

旧

使用document.querySelectorAll('.className')将分配给.whateverClass的所有元素收集到一个NodeList
接下来使用 Array.from() 将该 NodeList 转换为数组。
从现在开始，您将处理数组，最通用的数组方法是 Array.prototype.map()。

演示

const kArray = Array.from(document.querySelectorAll('.K'));

console.log(kArray);

const arrayOK = kArray.map(function(kay, idx) {
  var ok = kay.value;
  return ok;
});

console.log(arrayOK);

var FK = document.getElementById('formK');

FK.addEventListener('change', function(evt) {
  if (evt.target !== evt.currentTarget) {
    var tgt = evt.target.value;
    if (arrayOK.indexOf(tgt) > -1) {
      alert('Hey! That\'s already been entered, try something different.');
    }
    return false;
  }
});

.as-console-wrapper {
  max-height: 75px !important;
}

<form id='formK'>
  <input class='K' value='0'>
  <input class='K' value='b'>
  <input class='K' value='8'>
  <input class='K' value='f'>
  <input class='K' value='6'>
  <input class='K' value='c'>
  <input class='K' value='1'>
  <input class='K' value='2'>
  <input class='K' value='7'>
  <input class='K' value='5'>
  <input class='K' value='9'>
  <input class='K' value='d'>
  <input class='K' value='3'>
  <input class='K' value='a'>
  <input class='K' value='e'>
  <input class='K' value='4'>
</form>

Answer 4

下面的代码应该可以解决问题：

  let select_element = document.getElementsByClassName("r1"); //puts all the select elements into an array
  let values = []; //create a new array that will store the values of each select

  for (let i = 0; i < select_element.length; i++){
  //loop through the array to get all the chosen select values
    values.push(select_element[i].options[select_element[i].selectedIndex].value); 
  };

  //this check if any of the values are duplicated and alerts the user if they are
  sorted_array = values.sort();
  for (let i = 0; i < sorted_array.length; i++){
    if (sorted_array[i + 1] == sorted_array[i]){
      alert("duplicates exist");
      break;
    };
  };

可在此处找到可用的 JSFiddle：https://jsfiddle.net/darkisa/38u1t564/

当然，您也可以只检查所有值的总和是否大于或小于 10。由于您需要每个 select 值都是唯一的，而且您只有四个值可以具有 1 到 4 的值，在对所有值求和后，任何不等于 10 的值都表示某处存在重复项。

使用 getElementsByClassName 获取数组

Get array using getElementByClassName

javascript

getelementsbyclassname

更新

旧

演示