如何使用 onclick 按钮使 rect 消失并重新出现

Question

我有一些矩形，我想使用 onclick 按钮显示然后消失。但是，矩形永远不会消失。

我对其进行了编码，以便在按下某个按钮时，某些变量会 .hide() 或 .show()

我的逻辑是，在go1()中定义了所有变量，因此当go2()播放时，计算机已经知道r1.remove()指的是什么，因此将其隐藏， .show() 反之亦然。显然不是这样。

<button id="d" style="width:5em;height:3em;" onclick="go1">click me</button>
        <button id="b" style="width:5em;height:2em;" onclick="go2">click me</button>
        <button id = "a" style="width:5em;height:3em;" onclick="go3">click me2</button>

var p = Raphael(0, 0, 800, 800);

function go1() {
    let r1 = p.rect(300, 300, 50, 50)
        .attr({
            'fill': 'red',
            'cursor': 'pointer',
            'href': 'https://www.google.com/',
        });
    let r2 = p.rect(377, 300, 50, 50)
        .attr({
            'fill': 'blue',
            'cursor': 'pointer',
            'href': 'https://www.google.com/',
        });
    p.path("M362 162 L588 559");
    //p.path("M10 30L60 30L10 80L60 80z");

    let r3 = p.rect(477, 400, 50, 50)
        .attr({
            'fill': 'yellow',
            'cursor': 'pointer',
            'href': 'https://www.google.com/',
        });
};

function go2() {
    r1.show();
    r2.hide();
    r3.hide();
}

function go3() {
    r1.hide();
    r2.show();
    r3.show();
}

Answer 1

您似乎在 go1 中定义了 r1、r2 和 r3，因此它们在 go2 和 go3 中未定义。

一个解决方案是添加

let r1, r2, r3;

在所有功能之上，然后在 go1 内更改

let r1 = 到 r1 = 并对其他两个 r 变量执行相同的操作。

此外，我认为您需要将 onclick="go1" 更改为 onclick="go1()"，并对其他两个点击处理程序执行相同的操作。

我强烈建议您修正缩进。良好的缩进使此类问题更容易看到。如果您发现很难正确缩进代码，请尝试使用 https://beautifier.io/.

如何使用 onclick 按钮使 rect 消失并重新出现

How to make rect's disappear and re-appear using onclick buttons

javascript

html

raphael