使用函数根据JS中另一个函数中的布尔值更改颜色

Question

我有一个函数 returns 是这样的：

let checkAddedValuesFunction =

{"444" => Array(1), "T" => Array(1), ":778" => Array(1)}

0: {"444" => Array(1)}
key: "444"
  value: Array(1)
  0: {isValue: true, string: "111:222:444", at: 8}

1: {"T" => Array(1)}
key: "T"
 value: Array(1)
 0: {isValue: false, string: "SQL_DT", at: 5}

2: {":778" => Array(1)}

我正在尝试创建一个函数，该函数将根据 isValue true/false 语句更改字符串中元素的颜色。我目前正在做类似的事情，但它似乎根本不起作用：


    const changeColor = (target) => {
      for (const [key, value] of Object.entries(checkAddedValuesFunction)) {

        ~~// FIND IF VALUE IS TRUE THEN GO AND CHANGE COLOR //~~

        if (document.querySelector(".compareKey")) {
          document.querySelector(".compareKey").style.backgroundColor = "red";
        } else if (document.getElementsByClassName(".compareValue")) {
          document.getElementsByClassName(".compareValue").style.backgroundColor =
            "red";
        }
      }

    };

Answer 1

你的代码有很多小错误：

.querySelector() returns 只有第一个匹配项，你应该使用 .querySelectorAll()
您无法访问节点列表的 .style 属性，您必须循环节点列表并单独访问每个节点
.getElementsByClassName() 将 class 名称作为参数，因此没有 .

这是一个简化的小例子：

function changeElementsBgColor(elements, color) {
  for(let i=0; i<elements.length; i++) {
    elements[i].style.backgroundColor = color;
  }
}

if (document.querySelector(".compareKey")) {
  const elements = document.querySelectorAll(".compareKey")
  changeElementsBgColor(elements, "red");
}

if (document.getElementsByClassName("compareValue")) {
  const elements = document.getElementsByClassName("compareValue");    changeElementsBgColor(elements, "red");
}

<h1 class="compareKey">compareKey element 1</h1>
<h1 class="compareKey">compareKey element 2</h1>
<h1 class="compareValue">compareValue element 1</h1>
<h1 class="compareValue">compareValue element 2</h1>

使用函数根据JS中另一个函数中的布尔值更改颜色

Using function to change color based on Boolean value in another function in JS

javascript

arrays

boolean

function