Question

编写以下内容的另一种简洁方法是什么？基本上它会根据条件切换2按钮的可见性。

$("#myCheckBox").click(function() {
    if (window.console && window.console.log)
        console.log("billing only checked? " + this.checked);
    if (this.checked) {
        $("#btnNext").hide();
        $("#btnFinish").show();
    }
    else {
        $("#btnNext").show();
        $("#btnFinish").hide();
    }
});

只是寻找一种更有效的方式？

Answer 1

您可以使用.toggle，它接受一个参数，指示是否应显示或隐藏元素：

$("#btnNext").toggle(!this.checked);
$("#btnFinish").toggle(this.checked);

如果从一开始就正确设置了可见性，您甚至不必传递参数：

$("#btnNext, #btnFinish").toggle();

我同意其他人的可读性。 .toggle本身可能仍然可以理解，但.toggle(!this.checked)可能会变得更难以理解。

Answer 2

使用toggle（）函数 - http://api.jquery.com/toggle/

Answer 3

您可以使用.toggle()：

$("#myCheckBox").click(function() {
    if (window.console && window.console.log)
        console.log("billing only checked? " + this.checked);
    $("#btnNext").toggle(!this.checked);
    $("#btnFinish").toggle(this.checked);
});

Answer 4

你可以减少这个：

if (this.checked) {
    $("#btnNext").hide();
    $("#btnFinish").show();
}
else {
    $("#btnNext").show();
    $("#btnFinish").hide();
}

到此：

$("#btnNext").toggle(!this.checked);
$("#btnFinish").toggle(this.checked);

Answer 5

假设他们从正确的show和hide州开始，您可以执行以下操作。

$("#myCheckBox").click(function() {
  if (window.console && window.console.log) {
    console.log("billing only checked? " + this.checked);
  }
  $("#btnNext").toggle();
  $("#btnFinish").toggle();
}

Answer 6

您可以使用.toggle()代替show / hide，然后就可以摆脱if / else构造。

Answer 7

它可能不是100％有效 - 我相信你可以通过使用聪明的三元组合来缩小它（编辑：Felix Kling已经有一个很好的了） - 另一方面但，即使对于完全不熟悉该项目的人来说，这种方式也是完全可读的。

我倾向于保持原样。

另一种写javascript的方法

7 个答案: