Как изменить цвет заливки SVG по второму клику jquery

Question

Я пытаюсь изменить цвет заливки в SVG при втором клике, в настоящее время я могу изменить цвет заливки объявления при первом клике, но я хочу, чтобы цвет менялся / сбрасывался до значения по умолчанию при втором клике;Это мой текущий код:

jQuery('#color-my-svg').on("click", function() {
  if(!jQuery(this)[0].hasAttribute('style')){
    jQuery('#color-my-svg').css({ fill: "#ff0000" });
  }
  else{
    jQuery(this).removeAttr('style');
  }
});

Answer 1

Вы можете установить счетчик кликов как variable и установить флажок добавить / удалить класс в зависимости от количества нажатий, например:

HTML:

<div id="divId" class="divClass">I'm a div!</div>

CSS:

/* Styling for demo only */
.divClass {
  background: green;
  color: white;
  height: 100px;
  width: 100px;
}

.svg-fill-color {
  background: red;
  /* Add fill here */
}

JavaScript:

let clickNumbers = 0;

jQuery('#divId').on("click", function() {
        clickNumbers++;

    if(clickNumbers % 2 == 0){
        jQuery('#divId').addClass('svg-fill-color');
    } else {
        jQuery('#divId').removeClass('svg-fill-color');
    }
});

Вы можете проверить пример кода здесь.

Дайте мне знать, если это поможет!

Answer 2

Всякий раз, когда пользователь нажимает на элемент:

• Изменение цвета заливки, если элемент имеет идентификатор класса (скажем,
  click-one).

• Иначе добавьте идентификатор класса.

---

jQuery('#color-my-svg').on("click", function() {
  if(jQuery('#color-my-svg').hasClass("click-one")) 
    jQuery('#color-my-svg').css({ fill: "#ff0000" });
  else 
    jQuery('#color-my-svg').addClass("click-one");
});