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

Posted 2023-02-19

【中文标题】使用 jQuery 更改多个标签的填充颜色

【英文标题】：Change the fill color for multiple tags using jQuery

【发布时间】：2019-04-07 00:57:19

【问题描述】：

<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 的第三方网站上执行此功能，那么，有什么办法可以解决这个问题吗？

【参考方案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"   />

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

你可以用document.querySelectorAll()和Element.setAttribute()替换jQuery。

注意： IE 不支持NodeList.forEach()。如果需要支持 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"   />

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

【讨论】：

你不需要每个。 attr() 和大多数 jQuery 运算符一样，执行隐式 each

@Taplar - 我对 jQuery 有点生疏，但与其过滤，不如只通过填充属性获取元素。

这实际上是有争议的。如果你可以让你的选择器反映一个class/tag/id的基本选择器，而不是一个属性选择器，它可以被更好的优化。过滤器不涉及 DOM 查找。因此，与过滤器配对的基本查找可以更快。

我试过了，它说：$(...).each is not a function

我同意这可能是不成熟的，但我建议养成这个习惯可能是值得的，但这是一种意见。

【参考方案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);

【讨论】：

哎呀。我只是从示例中复制并粘贴。 $(rect[i]).attr("fill", newFill);

【参考方案3】：

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

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

【讨论】：

也不要尝试使用attr()，只需使用setAttribute()。 $('rect[i]') 不是对象的有效 CSS 选择器

我收到一条错误消息：Cannot read property 'setAttribute' of null PS：我在进行比较时使用了#

rect[i].setAttribute('fill', '#2038fb');

尝试我的脚本一次

您的选择器仍然无效@SantuRoy 那不是一个有效的 css 选择器。否则删除它周围的单引号