javascript - 如何使用 onclick 按钮使矩形消失并重新出现

Question

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

我对其进行了编码，以便当按下某个按钮时，某些变量将是 .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。

一种解决方案是添加

让 r1, r2, r3;

在所有函数之上，然后在 go1 内进行更改

让 r1 = 变为 r1 =，并对其他两个 r 变量执行相同的操作。

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

<小时/>

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