按输入类型选择元素，并根据值应用 CSS 类

Select elements by Input Type and apply CSS classes based on values

本文关键字：应用 CSS 类型 输入 选择 元素      更新时间：2023-09-26

我有一个页面，其中包含一大堆数字类型的输入框。这些可以单独更改，也可以通过选择器更改一组。

我想通过更改输入框的类向用户显示哪些输入框中的值大于 0。

我不能使用JQuery。 它必须用纯Javascript来完成。

我知道我需要使用事件侦听器将函数附加到它？

无论如何。。。下面是一段 HTML 作为示例：

<input name="qty1" type="number" min="0" value="0">
<input name="qty2" type="number" min="0" value="0">
<input name="qty3" type="number" min="0" value="0">
<input name="qty4" type="number" min="0" value="0">
<input name="qty5" type="number" min="0" value="0">

这里有一些我认为应该与之一起使用的Javascript：

function changeInputClass(element){
  if(element.value > 0){
    //add class 'bold-text' to this element
  }
  else {
    //remove class 'bold-text' from this element
  }
}
var myElements = document.getElementsByTagName('input');
for(var i=0; i<myElements.length; i++){
  if(myElements[i].type == 'number') {
    // add event listener here to call function changeInputClass()
  }
}

感谢您的帮助。

更新更真实的 html 表示形式：

<div id="selections" class="selections">
  <div class="images-container">
    <div>
      <div class="image-options">
        <div class="product-option">
          <div class="qty"><input name="qty1" type="number" min="0" value="0"></div>
          <div>Product Description 1</div>
        </div>
        <div class="product-option">
          <div class="qty"><input name="qty2" type="number" min="0" value="0"></div>
          <div >Product Description 2</div>
        </div>
        <div class="product-option">
          <div class="qty"><input name="qty3" type="number" min="0" value="0"></div>
          <div >Product Description 3</div>
        </div>
      </div>
      <div class="image-options">
        <div class="product-option">
          <div class="qty"><input name="qty4" type="number" min="0" value="0"></div>
          <div >Product Description 4</div>
        </div>
        <div class="product-option">
          <div class="qty"><input name="qty5" type="number" min="0" value="0"></div>
          <div >Product Description 5</div>
        </div>
        <div class="product-option">
          <div class="qty"><input name="qty6" type="number" min="0" value="0"></div>
          <div >Product Description 6</div>
        </div>
      </div>
    </div>
  </div>
</div>

创建了一个小提琴http://jsfiddle.net/narfie/g3gbqaxz/14/

现在我通过使用类 qty 遍历元素的第一个子元素来制作所有输入元素的数组。做了一个函数来检查对该元素数组的更改。将onchange添加到输入元素的任何较高ancestor。

var inputs = new Array();
window.onload = function () {
    var qtys = document.getElementsByClassName("qty");
    for (var i = qtys.length - 1; i >= 0; i--) {
        inputs[i] = qtys[i].children[0];
    };
}
function check() {
    for (var i = inputs.length - 1; i >= 0; i--) {
        if(inputs[i].value>0){
            inputs[i].classList.add("has-value");
        }
        else{
            inputs[i].classList.remove("has-value");
        }
    };
}

小提琴休息：http://jsfiddle.net/1jcyhpyL/8/

<html>
<body>
<input name="qty1" type="number" min="0" value="0" onchange="changeInputClass(this)">
<input name="qty2" type="number" min="0" value="0" onchange="changeInputClass(this)">
<input name="qty3" type="number" min="0" value="0" onchange="changeInputClass(this)">
<input name="qty4" type="number" min="0" value="0" onchange="changeInputClass(this)">
<input name="qty5" type="number" min="0" value="0" onchange="changeInputClass(this)">
<script>
function changeInputClass(element) {
 if (element.value > 0){
  element.style.fontWeight = 'bold';    
 }
 else {
  element.style.fontWeight = 'normal';  
 }
}
</script>

</body>
</html>

我有一个页面，其中包含一大堆类型为数字的输入框。这些可以单独更改

为此，您可以在每个元素上使用更改侦听器。您可以委托给祖先，但更改事件不会在所有浏览器中冒泡。

或者可以通过选择器更改其中一组。

如果通过脚本更改值，则不会导致调度更改事件，因此您可以手动调用侦听器，也可以调度自己的更改事件（并使其冒泡）。

在现代浏览器（可能是IE 9+）中，您可以执行以下操作：

function changeInputClass(){
  [].forEach.call(document.querySelectorAll('input[name^=qty]'), function(element) {
    if (element.value > 0) {
      element.classList.add('bold-text');
    } else {
      element.classList.remove('bold-text');
    } 
  });
}

在不太现代的浏览器（甚至是IE 6）中，您可以执行以下操作：

function changeInputClass(){
  var node, nodes = document.getElementsByTagName('input');
  var nameRE = /^qty/;
  for (var i=0, iLen=nodes.length; i<iLen; i++) {
    node = nodes[i];
    if (nameRE.test(node.name)) {
      if (node.value > 0) {
        node.className = 'bold-text';
      } else {
        node.className = '';
      }
    }
  }
}

下面是使用处理大多数情况的现代方法的示例。正如@RobG所述，您仍然会遇到以编程方式更改值的问题（即使是突变观察者也不会处理此问题）。但这应该公平地展示常见情况。

function changeClass(e) {
    var target = e.target || e;
    if (target.nodeName === 'INPUT' && target.type === 'number') {
        if (target.valueAsNumber > 0) {
            target.classList.remove('noValue');
            target.classList.add('hasValue');
        } else {
            target.classList.add('noValue');
            target.classList.remove('hasValue');
        }
    }
}
[].forEach.call(document.querySelectorAll('input[type="number"]'), changeClass);
new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
        if (mutation.type === 'childList') {
            [].forEach.call(mutation.addedNodes, changeClass);
        }
    });
}).observe(document, {
    attributes: false,
    attributeOldValue: false,
    characterData: false,
    characterDataOldValue: false,
    childList: true,
    subtree: true
});
document.addEventListener('change', changeClass, false);
document.querySelector('[name="qty5"]').value = 1;
var newinput = document.createElement('input');
newinput.name = 'qty6';
newinput.type = 'number';
newinput.min = 0;
newinput.value = 1;
document.body.appendChild(newinput);
var qty4 = document.querySelector('[name="qty4"]');
qty4.value = 1;
changeClass(qty4);
.noValue {
    background: red;
}
.hasValue {
    background: yellow;
}
<input name="qty1" class="noValue" type="number" min="0" value="0">
<input name="qty2" class="noValue" type="number" min="0" value="0">
<input name="qty3" class="noValue" type="number" min="0" value="0">
<input name="qty4" class="noValue" type="number" min="0" value="0">
<input name="qty5" class="noValue" type="number" min="0" value="0">

相关文章：