2

我知道这段代码很乱：

$("#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 被隐藏，以防这不明显

谢谢。

4

5 回答 5

4

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

但是，我质疑这样做的价值。代码不是写尽可能短的形式的竞赛。在性能方面，您的代码绝对没有问题；与 if 语句相比，三元组没有或多或少的内在性能。

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

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

更多阅读

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

$("#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");
});
于 2012-07-26T17:46:54.533 回答
3 
$("#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();
});

或者使.opencss类的背景位置部分......

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

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

    e.preventDefault();
});
于 2012-07-26T17:41:38.683 回答
0 
var open = $(this).hasClass('open');
$(this)
  .html( ( open ? "Show" : "Hide" ) + " Description")
  .css("background-position", open ? '85px 3px' : '88px -10px' );

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

<condition> ? <true_result> : <false_result>
于 2012-07-26T17:41:00.127 回答
0

好吧，我不知道它是否会变得更好，但是您可以执行以下操作：

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);
于 2012-07-26T17:41:52.957 回答
0

我不确定这是否更清洁，但这应该可以：

$("#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();
});
于 2012-07-26T17:45:34.060 回答