Question

我把一些SVG圈子放在一起，圈子的颜色应该在蓝色和红色之间的每次点击中交替。

我从中获得了一些不一致的行为，因为当我点击我的localhost环境中的圆圈时，它可以工作，但是在第二次点击之前颜色不会变为红色。

当我将代码放入jsFiddle时，其中一个圆圈起作用，即使代码相同也没有，并且它们都在控制台中给出相同的错误

[错误] ReferenceError：无法找到变量：changeColor1 onclick（_display：79）

＆＃13;

     var shapeClick = 				document.getElementById("circle0").addEventListener("click", changeColor);
        var clicks = 0;
        var colorToggle = true;

        function changeColor() {
          var color = colorToggle ? "#ff0000" : "#1dacf9";
          circle0.setAttribute('fill', color);
          colorToggle = !colorToggle;
        }


        var shapeClick = document.getElementById("circle1").addEventListener("click", changeColor1);
        var clicks = 0;
        var colorToggle = true;

        function changeColor1() {
          var color = colorToggle ? "#ff0000" : "#1dacf9";
          circle1.setAttribute('fill', color);
          colorToggle = !colorToggle;
        }

＆＃13;

<svg id="table1" width="66%" height="100vh" viewBox="0 0 700 666">

    <circle id="circle0" class="circles" cx="170" cy="125" r="20"     fill="#1dacf9" stroke="black" stroke-width="2" onclick="changeColor()"/>

    
          <circle id="circle1" class="circles" cx="250" cy="45" r="20"      fill="#1dacf9" stroke="black" stroke-width="2" onclick="changeColor1()"/>
      
      </svg>

＆＃13;

我确信有更简洁的方法可以做到这一点，特别是如果我将其扩展并添加100个圈子，我无法想到一种方法来实现它而无需使用大量代码。

Answer 1

你想念你打开svg标签

https://jsfiddle.net/9oagrcfu/

<svg>
<circle id="circle0" class="circles" cx="170" cy="125" r="20"     fill="#1dacf9" stroke="black" stroke-width="2" onclick="changeColor()"/>


      <circle id="circle1" class="circles" cx="250" cy="45" r="20"      fill="#1dacf9" stroke="black" stroke-width="2" onclick="changeColor1()"/>

  </svg>

Answer 2

在您的情况下，您正在重新定义已存在的变量，并且两个圆圈都为其切换引用了相同的值。

var shapeClick = ...

...

var shapeClick = ...

此外，您无需执行onclick="function()" 和 addEventListener;他们做同样的事情。

就精简而言，你应该做几件事：

创建一个对象以保持切换状态。键应为圈子的ID，值为true或false，表示每个圈子的状态。
制作一个处理函数，并使用event.target.getAttribute('id')标识点击了哪个圈。

应该最终看起来像这样：

var state = {};

var circleClickHandler = function (event) {
    var id = event.target.getAttribute('id');
    var color = state[id] ? "#ff0000" : "#1dacf9";
    event.target.setAttribute('fill', color);
    state[id] = !state[id];
};

// loop over each circle on the DOM
document.querySelectorAll('circle').forEach(function (element) {
    element.addEventListener('click', circleClickHandler);
});

任何人都可以发现我在这个SVG / Javascript函数出错的地方吗？

2 个答案: