如何在连续单击时切换不同的颜色（在SVG对象上）

Question

我试图让组中的所有元素在不同的点击次数下变为特定的颜色。一键=红色，两键=蓝色，依此类推。它需要切换组中的所有子级。

JavaScript

function call1() {
    console.log('call1');
    const children = document.getElementById('btn1').children;
    $(document).ready(function(){
        $("btn1").toggle(
            function(){$("btn1").css({"fill": "red"});},
            function(){$("btn1").css({"fill": "blue"});},
            function(){$("btn1").css({"fill": "green"});
        });
    });
}

SVG文件

<g id="btn1" onclick="call1()">
    <polygon fill="#FF0013" points="366.699,131 410,56 453.301,131  "/>
    <polygon fill="#07FF00" points="323.699,656 367,581 410.301,656     "/>
    <polygon fill="#0000FF" points="409.699,656 453,581 496.301,656     "/>
    <polygon points="366.699,581 410,656 453.301,581    "/>
</g>

我希望SVG组中的所有元素在第一次单击时变为红色，第二次单击为绿色，第三次单击为蓝色。

Answer 1

您可以使用模数和switch语句在每种颜色之间循环：

var count = 0;

function call1() {
  const button = $("#btn1");
  console.log(count);
  count = count % 3 + 1;
  switch (count) {
    case 1:
      button.css("fill", "red");
      break;
    case 2:
      button.css("fill", "blue");
      break;
    case 3:
      button.css("fill", "green");
      break;
  }
}

示例：

var count = 0;

function call1() {
  const children = $("#btn1").children();
  count = count % 3 + 1;
  switch (count) {
    case 1:
      children.css("fill", "red");
      break;
    case 2:
      children.css("fill", "blue");
      break;
    case 3:
      children.css("fill", "green");
      break;
  }
}

<svg height="1000" width="100%">
  <g id="btn1" onclick="call1()">
    <polygon fill="#FF0013" points="366.699,131 410,56 453.301,131  "/>
    <polygon fill="#07FF00" points="323.699,656 367,581 410.301,656     "/>
    <polygon fill="#0000FF" points="409.699,656 453,581 496.301,656     "/>
    <polygon points="366.699,581 410,656 453.301,581    "/>
  </g>
</svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

我必须稍微改变svg才能使它工作，然后我以Kobes代码为起点：

https://jsfiddle.net/gz9mc06r/

在svg中，我将其从使用'fill'属性更改为使用item=soup.select_one('.col-sm-6.col-lg-3').find_next('p').find('a').next_element.next_element.next_element print(item)

'style="fill:..."'

JavaScript看起来像这样：

<svg viewBox="0 0 800 800"><g id="btn1" onclick="call1()">
    <polygon style="fill:#FF0013" points="366.699,131 410,56 453.301,131  "/>
    <polygon style="fill:#07FF00" points="323.699,656 367,581 410.301,656     "/>
    <polygon style="fill:#0000FF" points="409.699,656 453,581 496.301,656     "/>
    <polygon points="366.699,581 410,656 453.301,581    "/>
</g>

</svg>

Answer 3

我将颜色排列在一起。 我要设一个柜台。每次单击时，计数器n ++。 我正在为组设置颜色类别

n %= colors.length;
btn1.setAttribute("class", colors[n])

请阅读我的代码中的注释

//the array of the colors
let colors = ["tomato","gold","skyblue"];
//the attay of the polygons
let polygons = Array.from(svg.querySelectorAll("#btn1 polygon"));


let n = 0;
svg.addEventListener("click",()=>{
  //remove the fill attribute of the polygons
  polygons.forEach(p =>p.removeAttribute("fill"))
  //the color for the group fill
  n %= colors.length;
  //reset the class name for the btn1
  btn1.setAttribute("class", colors[n])
  n++
})

svg{border:1px solid;width:100px;overflow:visible}

polygon{stroke:black}


.tomato{fill:tomato}
.gold{fill:gold}
.skyblue{fill:skyblue}

<svg id="svg" viewBox="300 50 230 650" >
<g id="btn1" >
    <polygon fill="#FF0013" points="366.699,131 410,56 453.301,131"/>
    <polygon fill="#07FF00" points="323.699,656 367,581 410.301,656     "/>
    <polygon fill="#0000FF" points="409.699,656 453,581 496.301,656     "/>
    <polygon points="366.699,581 410,656 453.301,581"/>
</g>
</svg>