Изменить цвет заливки для нескольких тегов с помощью jQuery - PullRequest
Новая
       30

Изменить цвет заливки для нескольких тегов с помощью jQuery

0 голосов
/ 02 ноября 2018 
<rect class="day" fill="#fbedf0" data-count="0"></rect>
<rect class="day" fill="#cqe45b" data-count="0"></rect>

Я пытаюсь отредактировать значения цвета заливки для нескольких тегов с помощью jQuery.

Я могу перебрать все прямоугольные теги и получить их значения заполнения, но не могу изменить их с помощью функции css (), и выдает ошибку, сообщающую, что свойство read 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

UPDATE: Я пытаюсь выполнить эту функцию на стороннем веб-сайте, который не позволяет импортировать jQuery, поэтому есть ли способ обойти это?

Ответы [ 3 ]

0 голосов
/ 02 ноября 2018

Получите все элементы 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. Вы можете заменить его на цикл for, если вам нужна поддержка IE. 

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>
0 голосов
/ 02 ноября 2018

Чтобы изменить произвольный атрибут элемента 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);
0 голосов
/ 02 ноября 2018

fill - это атрибут, поэтому он не изменяется в методе .css. Попробуйте это: 

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