私のjQueryを短くする

Question

どうすればこのjQueryを短くできますか？私はこれよりも良い作業方法がなければならないと思います！私はこのサイト上の最後のステップまでだし、それは:)

を終えたいと

<script> 
jQuery(function() { 
    var White = jQuery("#white").hide(); 
    jQuery("#firstpagename").on("click", function() { 
     White.toggle(); 
    }); 
}); 
</script> 
<script> 
jQuery(function() { 
    var Black2 = jQuery("#v2black").hide(); 
    jQuery("#secondpagename").on("click", function() { 
     Black2.toggle(); 
    }); 
}); 
</script> 
<script> 
jQuery(function() { 
    var Black3 = jQuery("#v3black").hide(); 
    jQuery("#thirdpagename").on("click", function() { 
     Black3.toggle(); 
    }); 
}); 
</script> 

すべてのヘルプや方向がgreattされるだろう...

（私はjQueryのに新しいです心の中で裸）

Answer 1

あなたはそれが少し短くするためにあなたのリンクをいくつかの余分なデータ属性と、余分なクラスを使用することができます。

それでは、あなたのHTMLは次のようになりましょう：

<div id="white">white</div> 
<div id="v2black">v2black</div> 
<div id="v3black">v3black</div> 

<div id="firstpagename" class="toggle" data-for="white">toggle white</div> 
<div id="secondpagename" class="toggle" data-for="v2black">toggle v2bacl</div> 
<div id="thirdpagename" class="toggle" data-for="v3black">toggle v3black</div> 

その後、あなたのjqueryのは次のように書き直すことができます。

jQuery(function() { 
    $('.toggle').on('click', function() { 
    var id = $(this).attr('data-for'); 
    $('#' + id).toggle(); 
    }); 
}); 

Answer 2

標準的な「アコーディオン」の振る舞いを再現しようとしているようです。ページのレイアウトによっては、可能であればアイテムをカプセル化すると便利です。ここでは、開いたり閉じたりすることを可能にする1つの解決策があります。 jsFiddle

<div id="white" class="panel"> 
    <div class="tab"></div> 
    <div class="content"></div> 
</div> 
<div id="v2black" class="panel">  
    <div class="tab"></div> 
    <div class="content"></div> 
</div> 
<div id="v3black" class="panel">  
    <div class="tab"></div> 
    <div class="content"></div> 
</div>​ 
<script> 
jQuery(".tab").on("click", function() { 
    $(this).closest('.panel').find('.content').toggle(); 
});​ 
</script> 

まず我々は唯一の肥大化を追加して3枚でそれを持っているので、1個のスクリプトタグと一つの文書準備のステートメントにコードを凝縮。

は、それから私は、doc準備ができてコールバックのパラメータとして$を選択することを確認しました。 jQueryは親切に1つの引数jQueryを渡しますので、私たちのコードブロックの内側に他の目的のために予約されていても、安全に$を使用することができます。

ここで、.tabは、.panelまでトラバースして戻って、その.contentを制御します。しかし、あなたの「タブ」あなたは常に彼らは別の方法で/非表示を表示するようにしているコンテンツにそれらを関連付けることができ、このようにカプセル化することができない場合はこのように同じ動作が3

すべてを制御することができます。私たちはあなたのhtmlを見るだけでいいです。

Answer 3

<script> 
jQuery(function() { 
    var White = jQuery("#white").hide(); 
    jQuery("#firstpagename").on("click", function() { 
     White.toggle(); 

    var Black2 = jQuery("#v2black").hide(); 
    jQuery("#secondpagename").on("click", function() { 
     Black2.toggle(); 
    }); 

    var Black3 = jQuery("#v3black").hide(); 
    jQuery("#thirdpagename").on("click", function() { 
     Black3.toggle(); 
    }); 
}); 
</script> 

開始です。あなたはより多くの要素を持っている場合は、buttonid <> toggleidマップをループする場合があります

var map = { 
    "white": "firstpagename", 
    "v2black": "secondpagename", 
    ... 
}; 
for (var toggler in map) 
    makeToggle(toggler, map[toggler]); 
function makeToggle(togglerid, pageid) { 
    var page = $(document.getElementById(pageid)).hide(); 
    $(document.getElementById(togglerid)).click(function() { 
     page.toggle(); 
    }); 
}