javascript - 使用 jQuery 更改多个标签的填充颜色

Question

<rect class="day" fill="#fbedf0" data-count="0"></rect>
<rect class="day" fill="#cqe45b" data-count="0"></rect>

我正在尝试使用 jQuery 编辑多个标签的填充颜色值。

我能够遍历所有 rect 标记并获取它们的填充值，但无法使用 css() 函数更改它们，并给出一个错误，指出读取的 css 属性为 null

for(let i=0; i<rect.length; i++){
  if(rect[i].getAttribute("fill") === "cqe45b"){
    $('rect[i]').css({fill:"#2038fb"});
  }
}

我本质上需要的是，如果填充颜色是#cqe45b，我想将其更改为#2038fb，如果它是#cbedf0，我想将其设置为#c7ef80

更新： 我正在尝试在不允许导入 jQuery 的第三方网站上执行此功能，那么，有没有办法解决这个问题？

Answer 1

获取所有rect.day[fill="#cqe45b"]元素，并用于.attr()设置fill属性的值。

$('rect.day[fill="#cqe45b"]').attr("fill", "#2038fb");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<svg viewBox="0 0 300 50" xmlns="http://www.w3.org/2000/svg">
  <!-- Simple rect element -->
  <rect class="day" fill="#fbedf0" x="0" y="0" width="50" height="50" />

  <!-- Rounded corner rect element -->
  <rect  class="day" fill="#cqe45b" x="120" y="0" width="50" height="50" rx="15" ry="15" />
</svg>

您可以将 jQuery 替换为document.querySelectorAll(), 和Element.setAttribute().

注意： NodeList.forEach() IE 不支持。如果需要支持 IE，可以将其替换为 for 循环。

document.querySelectorAll('rect.day[fill="#cqe45b"]')
  .forEach((el) => {
    el.setAttribute("fill", "#2038fb")
  });

<svg viewBox="0 0 300 50" xmlns="http://www.w3.org/2000/svg">
  <!-- Simple rect element -->
  <rect class="day" fill="#fbedf0" x="0" y="0" width="50" height="50" />

  <!-- Rounded corner rect element -->
  <rect  class="day" fill="#cqe45b" x="120" y="0" width="50" height="50" rx="15" ry="15" />
</svg>

Answer 2

为了改变你想要使用的 DOM 元素的任意属性.attr。http://api.jquery.com/attr/

$(rect[i]).attr("fill", "#2038fb");应该管用。

你可以实现if... else这样的：

let newFill
switch (rect[i].getAttribute("fill")) {
  case "#cqe45b":
    newFill = "#2038fb"
    break
  case "cbedf0":
   newFill = "#c7ef80"
   break
  default:
    ???
}
$(rect[i]).attr("fill", newFill);

Answer 3

fill 是一个属性，这就是它在 .css 方法上没有改变的原因。试试这个：

for(let i=0; i<rect.length; i++){
  if(rect[i].getAttribute("fill") === "#cqe45b"){
    $(this).attr("fill","#2038fb");
  }
}