javascript - 单行 if 语句

Question

请帮助我。我正在使用单行 javascript if 语句，但我希望它在检查条件后执行两个操作，但我不知道如何放置第二条语句。我以为分号会起作用，但事实并非如此。它说分号是一个错误。 这是我的代码，带有分号...

this.className === "unclickedButton" ? this.className = "clickedButton";
 $("#alert").style.display="block" : this.className = "unclickedButton"; 
$("#alert").style.display="none"

Answer 1

您可以使用comma operator来做到这一点:

this.className === "unclickedButton" ?
(this.className = ($("#alert").style.display="block", "clickedButton")) :
(this.className = ($("#alert").style.display="none", "unclickedButton"));

...但它不会说它可以产生可读的代码。我会使用普通的 if。

这是一个live example使用 jQuery (source)。 (我使用了show和hide，见下文)。但认真地说，将其可维护性/可读性与以下内容进行比较:

if (this.className === "unclickedButton") {
    this.className = "clickedButton";
    $("#alert").style.display = "block";
}
else {
    this.className = "unclickedButton";
    $("#alert").style.display = "none";
}

我知道我更愿意对哪一个进行维护。或者，如果您想要一行代码，请稍微更改 CSS，这样您就可以添加一个 button 类和一个 clicked 类，然后添加到其中，然后这样做(我假设这里是 jQuery):

$("#alert").toggle($(this).toggleClass('clicked').hasClass('clicked'));

Live Example | Source

<小时/>

旁注:您使用的选择器与 jQuery 中使用的选择器类似，但 jQuery 实例没有 style 属性。如果您使用 Prototype 或 MooTools，您可能需要删除 alert 前面的 #。如果您使用的是 jQuery，请使用其 show 和 hide 方法(可能还有 addClass/removeClass)。