Question

我有3个盒子，我希望它们在它们之间切换，并在第二次点击时关闭。目前它在它们之间切换很好（IF部分），但是当我点击同一个框以切换它时如果不起作用（“else if”部分似乎不起作用）。我想我需要重构if语句。任何帮助是极大的赞赏。

这是元素点击if-statement之一：

box1.click(function() {
    if (box1.attr(strOff)) {
        box1.attr(strOn);
        box2.attr(strOff);
        box3.attr(strOff);
    } else if (box1.attr(strOn)) {
               box1.attr(strOff);
    } else {}
});

Answer 1

您创建的if-else语句将始终在第一个if上返回true ...

原因是，对于条件，您传递的方法的结果将始终返回true。如Raphaels attr Spec所示，该方法将返回...

元素（如果传递了attr名称和值）
value（传递attr名称时的属性）
值数组（如果传递了attr名称）
attr对象（如果没有，如果通过的话）

所以，你基本上只是setting if语句中的框，然后返回true。相反，您应该只传递您需要检查的attr名称并将其与您的值进行比较。类似于，

if(box1.attr('stroke-width')=='5'){...}else{...}

Answer 2

当对象作为参数传递时，

Element.attr(...)设置属性。返回元素。如果你想要谷歌它 - 使用这样的东西：

box1.click(function() {
    if (box1.attr('stroke-width') == 1) {
        box1.attr(strOn);
        box2.attr(strOff);
        box3.attr(strOff);
    } else if (box1.attr('stroke-width') == 5) {
           box1.attr(strOff);
    } else {}
});

jsFiddle

上的示例

Raphael.js - if / else语句没有切换点击

2 个答案: