Question

嗨，

我想更改没有ID的元素的类，所以我正在这样做

var cols = document.getElementsByClassName('input-box');
        for(i=0; i<cols.length; i++) {
         cols[i].toggleClass('invisible');
        }

但是它行不通。我收到一条错误消息

cols[i].toggleClass is not a function

那是为什么？

谢谢。

Answer 1

您需要$(cols).toggleClass('invisible');，因为您的cols不是jquery对象，而toggleClass是jquery方法。

var cols = document.getElementsByClassName('input-box');
        //for(i=0; i<cols.length; i++) {
         //cols[i].toggleClass('invisible');
        //}
$('button').on('click', function(){
  $(cols).toggleClass('invisible');
});

.invisible {
display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input value="Input 1" class="input-box"/><br/>
<input value="Input 2" class="input-box"/><br/>
<input value="Input 3" class="input-box"/><br/>
<input value="Input 4" class="input-box"/><br/>
<button>Click Me </button>

Answer 2

您正在从非jquery对象调用JQuery函数。

如果您使用的是JQuery，则可以执行以下操作：

$('.input-box').toggleClass('invisible');

没有JQuery：

var cols = document.getElementsByClassName('input-box');
for(i=0; i<cols.length; i++) {
   cols[i].classList.toggle('invisible');
}

更改没有ID的元素的类

2 个答案: