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は「ShowDescription」を表示し、これが明白でない場合に備えて.descriptionは非表示になっています

ありがとう。

4

5 に答える 5

4

ここで他のいくつかの回答で見たように、三項演算子を使用してコードを数行短縮することは確かに可能です。

しかし、そうすることの価値には疑問があります。コードは、可能な限り短い形式を書くためのコンテストではありません。パフォーマンスに関しては、コードにまったく問題はありません。ifステートメントと比較して、3値について本質的にパフォーマンスが高いものはありません。

さらに、保守性を考慮する必要があります。現状では、コードは現在の形式でよりスキャン可能で理解しやすいものになっています。三項演算子を使用すると数行節約できますが、これも行ではなく、妥当なパフォーマンスで機能を提供することです。改善のために評価する必要がある場所は、コードの長さ自体ではなく、コードの再利用、効率、そして最終的にはミニファイアによるファイルサイズです。

三項演算子を使用する時間と場所があります。これは、読みやすく機能的なコード行をいくつか削除するためだけに、すでに機能しているコードに振りかける必要があるものではありません。

もっと読む

編集1つ... 1行の条件文の周りの不要な中括弧を削除できます：

$("#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 に答える