divをトグルするjquery - 複数のIDでこれを行う方法

Question

Jqueryを初めて使用しています。私の設定は以下の通りです：

私は、トグルすることができる必要がある一連のdivを持っています（隠して表示しています）。各divには実行可能なアクションがあり、どのdivからイベントが発生したかを知るために一意のIDが必要になります。

divを切り替えるには各divのボタンがあります（これはdiv内にはありません）。

今すぐjqueryを使用せずに、ボタンのonclickイベントを使用して、対応するdivのIDを渡して切り替えます。私は次の操作を行うことができますユニークなIDを使用して：

function toggleFlag(divId) { 
    var div = document.getElementById(divId); 
    div.style.display = (div.style.display=="block" ? "none" : "block"); 
} 

divIdは、イベントがDIV内のアクションが実行された場合はどこから来るので、私も知っているユニークです。

アンカーのコードは次のようなものになります。「111」は、固有のID

まずオフになっている私の範囲ならば、それは、このためのjQueryを使用することも価値があるところ

onclick="toggleFlag('id-111');" 

をjavascriptはそれほど複雑ではありません（単純なアヤックスは別として）。

さらに重要なことは、これがjqueryを使ってどのように正しく行われるのでしょうか？

更新：これを解決することに非常に近いです。私は各ボタンのために一意のクラス名を要求する以下の提案の1つを使用して動作させることができました。いくつかのメソッドは、クラス名がすべてのボタンで同じである実装を提案しています（ボタンクラスにスタイルを静的に割り当てることができるようにしたい）。しかし、これを動作させることができませんでした。誰かが解決策を詳しく教えてもらえますか？ありがとう！

Answer 1

あなたはこのような何かを行うことができます：

HTML：

<button id="btnId1" class="divId1" value="Click me to toggle divId1"/> 
<button id="btnId2" class="divId2" value="Click me to toggle divId2"/> 
etc... 

<div id="divId1">div 1</div> 
<div id="divId2">div 2</div> 
etc... 

SCRIPT：

$(function() { 
    $("button").click(function() { 
     var divId = $(this).attr("class"); 
     $("#" + divId).toggle(); 
    }); 
}); 

このアプローチは、唯一のすべてのボタンに一度のイベントを定義することの利点を持っています。非標準的な属性（jqueryも同様にピックアップできる）のように、div idをボタン情報に格納するための別の戦略を使用することもできます。

<button id="btn_divId1" value="Click me to toggle divId1"/> 
<div id="divId1">div 1</div> 

し、ボタンのIDからのdivのIDを抽出するには、

・ホープ、このことができます（個人的にこれは私が取ると思いアプローチがある）をクリック

EDIT：は、最初の質問に答えるために、はいjQueryを使ってこれを行うと、あなたが書いているコードの量を減らすことができますgであり、それはあなたが控えめに良いこと:)

EDIT 2で、ボタンにイベントを割り当てるために移動できるようになります使用して非標準の属性：

HTML：

<button id="btnId1" divid="divId1" class="btnToggle" value="Click me to toggle divId1"/> 
<button id="btnId2" divid="divId2" class="btnToggle" value="Click me to toggle divId2"/> 
etc... 

<div id="divId1">div 1</div> 
<div id="divId2">div 2</div> 
etc... 

SCRIPT：

$(function() { 
    $("button").click(function() { 
     var divId = $(this).attr("divid"); 
     $("#" + divId).toggle(); 
    }); 
}); 

Answer 2

切り替えるDIVのIDに対応するIDを持っているのは、あなたがあなたのアンカーを構築するとしましょうそれらはすべて共通のCSSクラスを持っています。たとえば、

<a href="#" id="a_111" class="toggleButton">Toggle</a> 
<div id="d_111">Some stuff.</div> 

jQueryを使用すると、これらすべてのクリックハンドラを簡単に構築できます。

$(function() { 
    $('a.toggleButton').click(function() { 
     var divId = $(this).attr('id').replace(/a_/,'d_'); 
     $(divId).toggle(); 
    }); 
});