私のjQueryトグルスクリプトを短くしてください

Question

こんにちは私はトリガーの#toggleshowと表示されるdivの#showで動作するトグルスクリプトを持っています。

私はこれを複数使用していますので、IDの末尾に数字の接尾辞を持つスクリプトがあります。 ＃toggleshow01、＃show01などがあります。この関数を実行します

私のスクリプトは次のとおりです。問題は、私はインスタンスごとにこのスクリプトを複製する必要がある

$('#toggleshow').live('click', function() {$('#show').slideToggle('slow', function() {});}); 

、すなわち

$('#toggleshow').live('click', function() {$('#show').slideToggle('slow', function() {});}); 
    $('#toggleshow00').live('click', function() {$('#show00').slideToggle('slow', function() {});}); 
    $('#toggleshow01').live('click',function() {$('#show01').slideToggle('slow', function() {});}); 
    $('#toggleshow02').live('click',function() {$('#show02').slideToggle('slow', function() {});}); 
    $('#toggleshow03').live('click',function() {$('#show03').slideToggle('slow', function() {});}); 

これらは私が生成するのに使用しています変数です接尾辞

var numToggle = 0; 
var numShow = 0;   
var toggleTrigger = $('<a id="toggleshow'+ "0" + numToggle++ +'" class="toggle_trigger actions">&nbsp;</a>'); 
var menuForm = $('<form id="menu_edit_form'+ "0" + numForm++ +'" class="menu_creation_form"></form>'); 

可能であれば、このスクリプトを1行に減らしてください。

Answer 1

私は個人的には "showX" に "toggleshowX" マッピングのようなものをやって嫌い。我々は、最近、データを保存するためのより良い方法があります。あなたは、たとえば、あなたのリンクは次のようになりかもしれない：

<a class="toggle_trigger actions" data-target="#show00">&nbsp;</a> 

これはコールバックで$(this).data('target')を使用して関連情報に基づいてターゲットを取得することができます。 1行のコードで

$('.toggle_trigger').live('click', function() { 
    var target = $(this).data('target'); 
    $(target).slideToggle('slow', function() {}); 
}); 

：

$('.toggle_trigger').live('click', function() {$($(this).data('target')).slideToggle('slow', function() {});}); 

Answer 2

「toggleShow」の各クラスに「toggleShow」のクラスを指定します（例：<div class="toggleShow">）。次にそれぞれがそれぞれ「ショー」のクラスを「表示」します。そして、あなたは簡単に行うことができます

$(".toggleShow").live("click", function() {$(".show", this).slideToggle("slow");});

は、私は正直に言うと、私はそれをテストしていないと言うが、それはうまく動作するはずですよ。

EDIT：

$(".toggleShow").live(
    "click", 
    function() { 
    $(".show", this).slideToggle("slow"); 
    } 
); 

Answer 3

このです方法：

が読みやすいフォーマット済み？

$(id^='toggleshow').live('click', function() { 
    $suffix = this.attr('id').substr(10); 
    $('#show'+$suffix).slideToggle('slow'); 
}); 

Answer 4

私はあなたが1行で行うことはできないと思います。 live()を使用するよりもおそらくこれを行うより良い方法がありますが、私はあなたのロジックを少しきれいにして、少し保守性にしました。私はまたあなたのHTMLやあなたが達成しようとしているアイデアを持っていないので、塩の粒でこれを取る。

 (function() { 
      $(document).ready(function() { 
       var items = new Array(), 
        idprefix = "toggle"; 

       for (var i = 0; i < 4; i++) { 
        items.push("show0" + i); 
       } 
       $.each(items, function() { 
        $('#' + idprefix + this).live('click', function() { 
         $('#' + this).slideToggle('slow'); 
        }); 
       }); 
      }) 
     })()