Question

我知道这段代码很乱：

$("#tog-desc").click(function(e) {
    $(this).toggleClass("open");
    $(".description").slideToggle();

    if( $(this).hasClass("open") ) {
        $(this).html("Hide Description").css("background-position", "85px 3px");
    }
    else {
        $(this).html("Show Description").css("background-position", "88px -10px");
    }

    e.preventDefault();
});

但我不确定如何用三元运算符整理它以使其整洁简洁。我似乎总是用Javascript编写过长的if / else语句，我想知道如何不这样做！

编辑：默认情况下，＃tog-desc显示“显示说明”，隐藏.description，以防这种情况不明显

感谢。

Answer 1

正如您在其他一些答案中看到的那样，使用三元运算符可以将代码缩短几行。

但是，我质疑这样做的价值。代码不是写出可能的最短形式的竞赛。在性能方面，您的代码绝对存在 nothing 错误;与if语句相比，三元组没有或多或少的内在表现。

此外，必须考虑可维护性。您现在的代码在当前形式下更易于扫描和理解。虽然三元运算符可能会为您节省几行，但它不是关于线路，而是关于提供具有合理性能的功能。您应该评估改进的地方不是代码长度本身，而是代码重用，效率，最后是通过缩小器的文件大小。

有时候和地方使用三元运算符 - 这不是你应该在已经工作的代码中使用的东西，只是为了消除一些清晰易读的功能代码行。

更多阅读

http://blog.ashodnakashian.com/2011/03/code-readability/
https://docs.google.com/presentation/d/1zHb855D5fQAKix47YCeVCH6QUQFzwCTxuz5GFMoNQyc/edit?pli=1#slide=id.p
可读代码的艺术有一个关于三元的部分 - http://www.amazon.com/The-Readable-Code-Dustin-Boswell/dp/0596802293

编辑有一件事......你可以删除围绕单行条件的不必要的花括号：

$("#tog-desc").click(function(e) {
    e.preventDefault();

    $(this).toggleClass("open");
    $(".description").slideToggle();
    if( $(this).hasClass("open") )
        $(this).html("Hide Description").css("background-position", "85px 3px");
    else
        $(this).html("Show Description").css("background-position", "88px -10px");
});

Answer 2

$("#tog-desc").click(function(e) {
    var $this = $(this), has_cls = $this.hasClass("open");
    $this.toggleClass("open")
       .text((has_cls ? "Hide" : "Show") + " Description")
       .css("background-position", has_cls ? "85px 3px" : "88px -10px");

    $(".description").slideToggle()

    e.preventDefault();
});

或者制作.open css类的背景位置部分...

$("#tog-desc").click(function(e) {
    var $this = $(this);
    $this.toggleClass("open")
       .text(($this.hasClass("open") ? "Hide" : "Show") + " Description");

    $(".description").slideToggle();

    e.preventDefault();
});

Answer 3

var open = $(this).hasClass('open');
$(this)
  .html( ( open ? "Show" : "Hide" ) + " Description")
  .css("background-position", open ? '85px 3px' : '88px -10px' );

这就是你要追求的吗？基本上是：

<condition> ? <true_result> : <false_result>

Answer 4

嗯，我不知道它是不是更好，但你可以这样做：

var update = $(this).hasClass('open') ? 
  { label: "Hide Description", position: "85px 3px" } :
  { label: "Show Description", position: "88px -10px" };

$(this).html(update.label).css("background-position", update.position);

Answer 5

我不确定这是否更干净，但这应该有效：

$("#tog-desc").click(function(e) {
    $(this).toggleClass("open");
    $(".description").slideToggle();

    var open = $(this).hasClass("open");
    $(this).html((open ? "Hide" : "Show") + " Description")
           .css("background-position", "85px " + (open ? "85px" : "3px");

    e.preventDefault();
});

用三元运算符整理javascript

5 个答案: