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为＆＃39; french-hens＆＃39;。< / p>

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

此外，id的要点是它在页面上是唯一的。拥有多个id为＆＃39; french-hens＆＃39;违反了这一点。

以下是一个例子：

＆＃13;

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);

＆＃13;

Answer 2

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

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

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

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

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

看到这个小提琴：Problem with operator precedence

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

2 个答案: