同じクラス名の複数のdivを表示/非表示にする

Question

同じクラス名のdivを無限に表示/非表示したい。私はこれにJQueryを使用します。私jsfiddleを参照してください：http://jsfiddle.net/1g2hw6hh/2/

が、私はこの問題を解決してもらうかのdivが独立/非表示を表示する方法

$(document).ready(function() { 
    $(".jsonInfo").hide(); // it's obvious 
    $(".showJSON").click(function() { // on click... 

    $(".jsonInfo") 
     .hide() // ...hide all other previus opened elements... 
     .eq($(this).index('.showJSON')) // ... select right one by index of clicked .showJSON element... 
     .toggle(); // and show/hide it 
    }); 
}); 

JQueryの

で次のセレクターを使用しようとしましたか？

Answer 1

.next（）「.jsonInfo」クラスを持つ次の兄弟要素を選択します。あなたの次のsibilingsは「.row」クラスを持つ唯一のボタンとのdivのがあるので、あなたはこのようなものを使用する必要があります：

$(document).ready(function() { 
 
    $("div.jsonInfo").hide(); // it's obvious 
 
    $("button.showJSON").click(function() { // on click... 
 
    
 
    $("div.jsonInfo") 
 
     .hide() // ...hide all other previus opened elements... 
 
     .eq($(this).index('.showJSON')) // ... select right one by index of clicked .showJSON element... 
 
     .toggle(); // and show/hide it 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button class="showJSON">Show JSON 1</button> 
 
<button class="showJSON">Show JSON 2</button> 
 
<button class="showJSON">Show JSON 3</button> 
 

 
<div class="row"> 
 
    <div class="jsonInfo"> 
 
    <h6>JSON 1</h6> 
 
    </div> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="jsonInfo"> 
 
    <h6>JSON 2</h6> 
 
    </div> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="jsonInfo"> 
 
    <h6>JSON 3</h6> 
 
    </div> 
 
</div>

しかし、あなたは覚えておく必要がある、あなたは同じ量を持っている必要がありますbutton.showJSONとdiv.jsonInfoの順番になります。

Answer 2

各ボタンに値（またはデータ属性）を追加してからonclick - その値（またはデータ属性）を取得し、.eq（）を使用して特定のdivを表示することができます。実際には、最初のボタンをクリックすると、最初の関連divが表示され、2番目のボタンをクリックすると、表示divが非表示になり、指定されたdivが表示されます。これは、ボタンの番号付けされた番号付けがゼロであることを必要としません。

（それらはすべて同じ基本構造を持っている場合）あなたは、ループを使用して、ページにコンテンツを入れたときにそのループのインデックスを使用して、ボタンを作成するためのコードを簡素化することができます）

$(document).ready(function() { 
 
    $(".jsonInfo").hide(); 
 
    $(".showJSON").click(function() { 
 
    $(".jsonInfo").hide(); 
 
    var showJsonVal = $(this).val(); 
 
    $(".jsonInfo").eq(showJsonVal).show(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="showJSON" value="0">Show JSON 1</button> 
 
<button class="showJSON" value="1">Show JSON 2</button> 
 
<button class="showJSON" value="2">Show JSON 3</button> 
 

 
<div class="row"> 
 
    <div class="jsonInfo"> 
 
    <h6>JSON 1</h6> 
 
    </div> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="jsonInfo"> 
 
    <h6>JSON 2</h6> 
 
    </div> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="jsonInfo"> 
 
    <h6>JSON 3</h6> 
 
    </div> 
 
</div>

Answer 3

あなたは、NEXTボタンのdivに/非表示を表示したい場合 - あなたはあなたのhtmlを書き換える必要があります。

<button class="showJSON">Show JSON 1</button> 
<div class="jsonInfo"> 
<h6>JSON 1</h6> 
</div> 
... 

しかし、あなたは、ボタンのクラスで非表示にする必要がある場合、あなたはそのようになめらか必要があります。

<button class="showJSON" class-to-hide="jsonInfo">Show JSON 1</button> 

$(document).ready(function() { 
    $(".jsonInfo").hide(); 

    $(".showJSON").click(function() { 
     var cls = $(this).attr('class-to-hide');   
     $("div."+cls).toggle(); 
    }); 
}); 

Answer 4

これらを個別に切り替えるには、IDまたはデータIDを使用する必要があります。

<button id="1" class="showJSON">Show JSON 1</button> 
<!-- infinitely many buttons...--> 

<div data-id="1" class="jsonInfo"> 
    <h6>JSON 1</h6> 
</div> 
<!-- infinitely many divs...--> 

https://jsfiddle.net/k0fL2aho/