javascript - 函数中的 if/else 语句 : using onclick as a switch

Question

我已经在 google 上寻找解决方案，这似乎是永恒的，但我似乎无法正确地制定我的搜索，或者没有人发布我正在寻找的代码。

我目前正在尝试创建一个函数来修改 div 元素的一个或多个边距。我想在函数中使用 if/else 语句，以便 onclick 事件在两个条件之间切换。这是我到目前为止一直在做的事情；

function facebookToggle()
{
    if($('#facebooktab').style.margin-left == "-250px";)
    {
        document.getElementById("facebooktab").style.marginLeft="0px";
    }
    else
    {
        document.getElementById("facebooktab").style.marginLeft="-250px";
    }
}

我试过稍微改变一下，比如在“marginLeft”和“margin-left”之间切换，看看我是否只是使用了错误的术语。我开始怀疑是否可能无法结合 jQuery 和常规 javascript？我不知道.. 目前这一切都只是我的猜测。

无论如何，我有一个 div，它现在已定位(固定)，因此几乎所有内容都隐藏在浏览器的边界之外。我希望更改 onclick 的边距，以便它可以完全显示在页面上。当它显示时，我希望能够通过单击它再次隐藏它。

我可能以错误的方式处理这个问题，但我真的希望有人能帮助我，甚至告诉我另一种方法来获得相同的结果。感谢您能给我的任何帮助。

您可以在以下位置查看它的运行情况:http://www.torucon.no/test/

(编辑:顺便说一下，我是一个完全的 javascript 新手，在这个实验之前我没有使用 javascript 的经验。请不要太苛刻，因为我知道我可能在这个短片中犯了一些非常愚蠢的错误代码。)

已解决的问题:

function facebookToggle() {
var fb = $('#facebooktab'); // save reference to element
if( fb.css('margin-left') === '-250px' ) {
    fb.css('margin-left', '0px');
} else {
    fb.css('margin-left', '-250px');
}
}

Answer 1

jQuery 对象没有名为style 的属性，所以

if($('#facebooktab').style.margin-left == "-250px";)
//                   also remove this semi-colon! ^

会抛出一个错误。访问 CSS 属性的一些选项是 (1)

document.getElementById("facebooktab").style.marginLeft;

您已正确使用，或 (2)

$('#facebooktab').css('margin-left');

考虑在所有三种情况下保持一致并使用相同的方法。你可以像 jQuery 一样分配 css 属性

$('#facebooktab').css('margin-left', '-250px');

---

考虑到这些因素，这里有一个重写建议:

function facebookToggle() {
    var fb = $('#facebooktab'); // save reference to element
    if( fb.css('margin-left') === '-250px' ) {
        fb.css('margin-left', '0px');
    } else {
        fb.css('margin-left', '-250px');
    }
}

这是另一个使用预定义 CSS 类的方法:

#facebooktab {
    margin-left: -250px; /** default state */
}

.no-left-margin {
    margin-left: 0px;
}

function facebookToggle() {
    $('#facebooktab').toggleClass('no-left-margin');
}

• > toggleClass