変数を使用してjqueryを短縮しようとしました

Question

変数を使用して以下のコードを短縮しようとしています。それはかなり冗長であるようです、そうです。

<script type="text/javascript"> 
$(document).ready(function(){ 
    $("div.first").click(function() 
    { 
     if ($('#firsthidden').css('display') == "block") 
     { 
      $("#firsthidden").hide("blind", "slow"); 
      $("div.outer").animate({height:200},"slow"); 
     } 
     else 
     { 
      $("#firsthidden").show("blind", "slow"); 
      $("div.outer").animate({height:390},"slow"); 
     } 
     if ($('#secondhidden').css('display') == "block") 
     { 
      $("#secondhidden").hide("blind", "slow"); 
     } 
     if ($('#thirdhidden').css('display') == "block") 
     { 
      $("#thirdhidden").hide("blind", "slow"); 
     } 
    }); 
    $("div.second").click(function() 
    { 
     if ($('#secondhidden').css('display') == "block") 
     { 
      $("#secondhidden").hide("blind", "slow"); 
      $("div.outer").animate({height:200},"slow"); 
     } 
     else 
     { 
      $("#secondhidden").show("blind", "slow"); 
      $("div.outer").animate({height:390},"slow"); 
     } 
     if ($('#firsthidden').css('display') == "block") 
     { 
      $("#firsthidden").hide("blind", "slow"); 
     } 
     if ($('#thirdhidden').css('display') == "block") 
     { 
      $("#thirdhidden").hide("blind", "slow"); 
     } 
    }); 
    $("div.third").click(function() 
    { 
     if ($('#thirdhidden').css('display') == "block") 
     { 
      $("#thirdhidden").hide("blind", "slow"); 
      $("div.outer").animate({height:200},"slow"); 
     } 
     else 
     { 
      $("#thirdhidden").show("blind", "slow"); 
      $("div.outer").animate({height:390},"slow"); 
     } 
     if ($('#secondhidden').css('display') == "block") 
     { 
      $("#secondhidden").hide("blind", "slow"); 
     } 
     if ($('#firsthidden').css('display') == "block") 
     { 
      $("#firsthidden").hide("blind", "slow"); 
     } 
    }); 

}); 
</script> 

私は変数を使用してこれを短縮しようとしています。コードロジックがダウンしているので、構文/フォーマットの問題だと思います。ここに私の試みです：

<script type="text/javascript"> 
var x = null; 
var a = null; 
var b = null; 

$(document).ready(function(){ 
    $("#first").click(function() 
    { 
     x = $("#firsthidden"); 
     a = $("#secondhidden"); 
     b = $("#thirdhidden"); 
    }); 
    $("#second").click(function() 
    { 
     x = $("#secondhidden"); 
     a = $("#firsthidden"); 
     b = $("#thirdhidden"); 
    }); 
    $("#third").click(function() 
    { 
     x = $("#thirdhidden"); 
     a = $("#firsthidden"); 
     b = $("#secondhidden"); 
    }); 
    $("div.clicked").click(function() 
    { 
     if (x.css('display') == "block") 
     { 
      $(x.hide("blind", "slow"); 
      $("div.outer").animate({height:200},"slow"); 
     } 
     else 
     { 
      x.show("blind", "slow"); 
      $("div.outer").animate({height:390},"slow"); 
     } 
     if (a.css('display') == "block") 
     { 
      a.hide("blind", "slow"); 
     } 
     if (b.css('display') == "block") 
     { 
      b.hide("blind", "slow"); 
     } 
    }); 
}); 
</script> 

Answer 1

あなたはこのまですべてそのコードを減らすことができるはずです：取得セレクタの配列を作るall

に

$(document).ready(function() { 

    var all = $('#firsthidden, #secondhidden, #thirdhidden'), 
     arr = ['div.first', 'div.second', 'div.third']; 

    all.each(function(i) { 
     var this_hidden = this; 

     $(arr[i]).click(function() { 
      var the_height = $(this_hidden).css('display') == 'block' ? 200 : 390; 
      $(this_hidden).toggle("slow", "linear"); 
      $("div.outer").animate({height: the_height },"slow"); 
      all.not(this_hidden).hide("slow", "linear"); 
     }); 
    }); 

}); 

• キャッシュ'#firsthidden, #secondhidden, #thirdhidden'要素クリックハンドラー'div.first', 'div.second', 'div.third'

• 他単に.hide()"div.outer"

• をアニメーション化する適切な高さを決定するために、this_hiddenで表さ"#...hidden"要素を使用

• 代わりifステートメントを使用する"#...hidden"要素（this_hidden）を表示または非表示にするtoggle()^[docs]方法を使用します2つの"#...hidden"要素はifを除き、not()^[docs]メソッドを使用してトグルされているものを除きます。

---

EDIT："div.outer"をアニメーション不足している行を置き換え。それを指摘するために@natedavisoldsに感謝します。

EDIT 2：hidden要素のマイセレクタが間違っていました。私は$('#firsthidden, #secondhidden, #thirdhidden')の代わりに$('#firsthidden', '#secondhidden', '#thirdhidden')でした。

また、私は質問から逆"blind"と"slow"をコピーしました。

修正済み。

EDIT 3：the_height変数を設定するのが遅すぎました。アニメーションが始まる前に実行されるように、アニメーションを1行上に移動し、それが機能します。

私のコードをテストしていないために恥ずかしいです！

例：http://jsfiddle.net/NnyGR/

Answer 2

$("div.clicked").click(function() 
    { 
     if (x.css('display') == "block") 
     { 
      $(x.hide("blind", "slow"); 
      $("div.outer").animate({height:200},"slow"); 
     } 

ニーズ

$("div.clicked").click(function() 
    { 
     if (x.css('display') == "block") 
     { 
      x.hide("blind", "slow"); 
      $("div.outer").animate({height:200},"slow"); 
     } 

Answer 3

すべきは、これを試してみてください。

$(document).ready(function(){ 
    $("#first").click(function() 
    { 
     MyFunction($("#firsthidden"), $("#secondhidden"), $("#thirdhidden")); 
    }); 
    $("#second").click(function() 
    { 
     MyFunction($("#secondhidden"), $("#firsthidden"), $("#thirdhidden")); 
    }); 
    $("#third").click(function() 
    { 
     MyFunction($("#thirdhidden"), $("#secondhidden"), $("#firsthidden")); 
    }); 
    function MyFunction(x, a, b) 
    { 
     if (x.css('display') == "block") 
     { 
      $(x.hide("blind", "slow"); 
      $("div.outer").animate({height:200},"slow"); 
     } 
     else 
     { 
      x.show("blind", "slow"); 
      $("div.outer").animate({height:390},"slow"); 
     } 
     if (a.css('display') == "block") 
     { 
      a.hide("blind", "slow"); 
     } 
     if (b.css('display') == "block") 
     { 
      b.hide("blind", "slow"); 
     } 
    }); 
}); 

Answer 4

あなたは、タブ付きコンテンツのようなもののために行くしている場合。プラグインがあるか、自分で書き込むことができます。この行の何かになる可能性がありますhttp://jsfiddle.net/XYGHQ/6/