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/