Javascript 基于div值更改CSS值

我试图根据从php数据库查询中提取的div值来更改css网格中单元格的背景。我使用jquery来实现与另一个div相同的功能，但唯一的区别是正在比较的值是css中相同的div。下面是html的div结构。box datetime是box a的子对象

这是我正在使用的函数

$('.datetime').each(function(index, value) {

  var value = Number($(this).text());
  console.log(value);
  if (value < 4)
     $('.a').css('background-color', '#fff');
     else if (value >= 4 && value <= 15)
     $('.a').css('background-color', 'orange');
     else
     $('.a').css('background-color', 'purple');   

});

.datetime是一个整数，表示2次之间的分钟数。 .a是我要更改其css属性的css网格单元。 现在，它只会将所有的.a背景色变成fff。它将无法正确评估。我做错了什么？

试试这个：

  var value = Number($('.datetime').text());
  //console.log(value);
  if (value < 4)
     $(".a", '.datetime').css('background-color', '#fff');
  else if (value >= 4 && value <= 15)
     $(".a", '.datetime').css('background-color', 'orange');
  else
     $(".a", '.datetime').css('background-color', 'purple');   

…如果您只有一个小组，您不需要每个小组都有一个小组，请尝试以下方法：

  var value = Number($('.datetime').text());
  //console.log(value);
  if (value < 4)
     $(".a", '.datetime').css('background-color', '#fff');
  else if (value >= 4 && value <= 15)
     $(".a", '.datetime').css('background-color', 'orange');
  else
     $(".a", '.datetime').css('background-color', 'purple');   

---

…如果只有一个组，则不需要使用each

设置所有.a元素的样式。循环中的最后一个值决定了所有.a元素的值。要为每个.datetime单独设置它们，请获取每个.datetime的父.a元素：

---

您正在为所有.a元素设置样式。循环中的最后一个值决定了所有.a元素的值。要为每个.datetime单独设置它们，请获取每个.datetime的父.a元素：

---

---

您正在从中传入值，但将覆盖下一行中的值。此外，您不需要检查值是否为您正在从中传入的值，但会覆盖下一行中的值。另外，您不需要检查值是否为。请记住告诉用户问题是什么，以及这有什么帮助。我们来这里是为了教育人们，而不仅仅是在他们身上转储代码。谢谢Erick，但这只会改变.datetime网格单元格的CSS，而不是.a。我已经编辑了我的问题，包括如何设置html。埃里克，我已经在上面添加了它。谢谢。正如您所看到的，您的代码很好，但您必须正确定义选择器。请记住告诉用户问题是什么，以及这有什么帮助。我们来这里是为了教育人们，而不仅仅是在他们身上转储代码。谢谢Erick，但这只会改变.datetime网格单元格的CSS，而不是.a。我已经编辑了我的问题，包括如何设置html。埃里克，我已经在上面添加了它。谢谢。正如您所看到的，您的代码很好，但您必须正确定义选择器。可能是因为值总是小于4<4，这就是为什么要用背景色填充它：fff？？？Sider，没有值可以是任何值，我复制的示例恰好是1。此外，fff只是一个占位符，用于查看它是否不合适，因为页面背景是黑色的。谢谢你的表扬！可能是因为值总是小于4<4，这就是为什么要用背景色填充它：fff？？？Sider，没有，值可以是任何东西，我复制的示例恰好是1。此外，fff只是一个占位符，用于查看它是否不合适，因为页面背景是黑色的。谢谢你的表扬！是的，你太棒了。谢谢不客气。实际上Jonathan的答案更好，因为传递给函数的第二个参数是元素，还要注意他的if/else逻辑commentsyezzz，你太棒了。谢谢不客气。实际上，Jonathan的答案更好，因为传递给函数的第二个参数是元素，并且还要注意他的if/else逻辑注释

$('.datetime').each(function(index, value) {

  var value = Number($(this).text());
  console.log(value);

  var $elem = $(this).parent();

  if (value < 4)
     $elem.css('background-color', '#fff');
  else if (value >= 4 && value <= 15)
     $elem.css('background-color', 'orange');
  else
     $elem.css('background-color', 'purple');   

});