Javascript 运动学；使用按钮使多个对象显示和消失

我是KineticJS的新手，我正在尝试找出如何使用按钮使不同的项目出现或消失。下面是带有示例的jsfiddle

有四个盒子。我想这样做，当我点击某个框的按钮时，该框会出现，而任何其他可见的框都会消失

在第一个JSFIDLE中，我使用addEventListener并单独列出所有四个正方形，将它们设置为正确的不透明度。而且效果很好：

然而，我实际上想要在中实现的项目有30项，而不是4项。因此，我的问题是，是否有一种更快的方法将项目分组在一起，而不是列出它们。我试过使用Kinetic.Group，但似乎不起作用：

我的按钮事件代码是：

    document.getElementById('s1').addEventListener('click', function() {
        square.setOpacity(1);       
        layer.draw();
    }, false);

---

好吧，我对KineticJS了解不多，但我认为您可以通过简单的旧JavaScript实现您想要的

这显示了一种做你想做的事情的方法

这里的基本思想是将所有按钮设置为具有一个通用类名。然后，使用

document.getElementsByClassname

可以获得一个按钮元素数组。我使用每个按钮的id来描述结果方块在行/列布局中的所需位置（例如，id=“1_0”是第一行，第零列；id=“0_1”是第零行，第一列）

然后，您所要做的就是在数组上循环，并附加KineticJS形状对象和事件侦听器

在KineticJS形状中，我定义了一个drawFunc，它引用了框坐标的变量。这个变量必须是不变的（也就是说，每次循环迭代时都不会重写它）。为此，最好的方法是以某种方式将坐标附加到形状对象。我选择计算每个框的行和列，并将它们附加到对象。然后，在drawFunc中有一些计算引用框的行/列来计算角点坐标。毫无疑问，有更好的方法做这件事，但我很累

---

现在，您可以在HTML中创建任意数量的按钮，它们将根据ID中指定的位置创建框。

我喜欢此解决方案，但我也会使用内置构造函数创建矩形，以防您需要从层中附加/分离项，而不仅仅是隐藏项：此解决方案非常有效。关键是创建一个按钮数组，并将每个正方形附加到按钮上。我花了一段时间才弄明白，因为我实际使用的对象在位置或形状上都没有图案。我意识到我的问题不清楚：我无法避免单独定义每个形状，但我希望避免在每个按钮中再次列出它们，以使事物出现和消失。所以这个方法很棒：谢谢沃伦！我注意到小提琴不再工作，所以我用最新版本的KineticJS对其进行了更新：