动力学JS；使用按钮使多个对象出现和消失

Question

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

有四个盒子。我想这样做，以便当我单击一个框的按钮时，该框会出现，并且任何其他可见的框都会消失。

在第一个 JSFiddle 中，我使用了 addEventListener 并分别列出了所有四个正方形，并将它们设置为正确的不透明度。它工作正常：

http://jsfiddle.net/T8m64/85/

但是，我真正想要实现的项目有 30 个项目，而不是 4 个。所以我的问题是是否有更快的方法将项目组合在一起而不是列出它们。我用 Kinetic.Group 试过这个，但它似乎不起作用：

http://jsfiddle.net/T8m64/86/

我的按钮事件代码是：

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

Answer 1

好的，所以我对 KineticJS 了解不多，但我认为您可以使用普通的旧 JavaScript 实现您想要的。

Here is a fiddle 展示了一种做你想做的事的方法。

这里的基本思想是您将所有按钮设置为具有一个通用类名。然后，使用document.getElementsByClassname 可以获得按钮元素数组。我使用每个按钮的 id 来描述生成的正方形在行/列布局中的所需位置（例如 id="1_0" 是第一行，第 0 列；id="0_1" 是第 0 行，第 1 列）。

然后您所要做的就是遍历数组并附加 KineticJS 形状对象和事件侦听器。

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

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