Javascript可以将背景颜色更改为某些<div>

Question

我在表中有以下HTML代码：

 $(function() { $(".numbers-row").append('<div class="inc button">+</div><div class="dec button">-</div>'); $(".button").on("click", function() { var $button = $(this); var oldValue = $button.parent().find("input").val(); var divut = document.getElementById('french-hens'); if ($button.text() == "+") { var newVal = parseFloat(oldValue) + 1; } else { // Don't allow decrementing below zero if (oldValue > 0) { var newVal = parseFloat(oldValue) - 1; } else { newVal = 0; document.getElementById("french-hens").style.background = 'orange'; } } $button.parent().find("input").val(newVal); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <td> <div class="numbers-row"> <input type="text" name="french-hens" id="french-hens" value="45"> </td> <td> <div class="numbers-row"> <input type="text" name="french-hens" id="french-hens" value="30"> </td> <td> <div class="numbers-row"> <input type="text" name="french-hens" id="french-hens" value="`0"> </td> <td> <div class="numbers-row"> <input type="text" name="french-hens" id="french-hens" value="`10"> </td> 

当该div的值达到0时，我想完成的事情是改变了背景色。

使用我的Javascript代码，我仅更改了第一个div。

任何想法如何以橙色开始，所有已经具有值0的div，以及当我将该值减小为0时自动以橙色更改颜色。 预先感谢

Answer 1

您正在运行document.getElementById('french-hens') ，即使您有ID为'french-hens'的多个元素，它也仅返回一个元素（按方法的名称）。

相反，请尝试使用document.getElementsByName('french-hens') 。 这将为您提供一个数组，您必须循环遍历该数组，并在该数组的每个元素上将颜色设置为橙色。

另外，ID的要点是它在页面上是唯一的。 具有多个id为“ french-hens”的元素违反了该规定。

这是一个例子：

 var el1 = document.createElement('div'); var el2 = document.createElement('div'); el1.setAttribute('id', 'test'); el2.setAttribute('id', 'test'); el1.setAttribute('name', 'test'); el2.setAttribute('name', 'test'); document.body.appendChild(el1); document.body.appendChild(el2); var byId = document.getElementById('test'); var byName = document.getElementsByName('test'); console.log('document.getElementById:\\n', byId); console.log('document.getElementsByName:\\n', byName); 

Answer 2

我同意Xeraqu关于使用Ids的观点。

但是，要获得我认为想要的东西，您唯一需要做的就是重用一些已经使用的代码背后的原理：

$button.parent().find("input").val(newVal);

将“ .val”更改为“ .css”：

$button.parent().find("input").css("background-color","orange");

看到这个小提琴： https : //jsfiddle.net/063mawvq/5/