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

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

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

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

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

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

请看这个 fiddle :https://jsfiddle.net/063mawvq/5/