jquery - jqueryの同じクラスは1つを表示し、他のjsfiddleを非表示にします

Question

このコードでギャラリーを作ろうとしています。

ボタンとコンテンツ用に2つの別々のコンテナーがある場合は機能しますが、すべてに1つのコンテナーを使用する方法はありますか？

また、（1、2、3、...）のような余分なクラスを使用せずに

HTML：

<div id="content">this is a box</div>
<button>First</button>
<div class="info">hahahaha</div>
<button>Second</button>
<div class="info">hahahaha2</div>
<button>Third</button>
<div class="info">hahahaha3</div>

JS：

    $(".info").hide();

$("button").click(function () {

    //replace stuff inside #content with .info in the div under each box
    $("#content").html($(this).find(".info"));

});

http://jsfiddle.net/MsUVu/

Answer 1

これを変える：

$("#content").html($(this).find(".info"));

これに：

$("#content").html($(this).next(".info").text());

jsFiddleの例

.find()要素の子を通過します。.next()次の兄弟要素を取得する必要があります。

Answer 2

編集：私はあなたの質問を誤解したので、これはあなたが望んでいたものではありません。これは、クリックしたボタンの下のdivを開く/非表示にするだけです。非常に簡潔に、他の答えを使用してください。

次の2行を追加します。

    $('.info').hide();
    $(this).next('div:first').show();

したがって、次のようになります。

$(".info").hide();

$("button").click(function () {
    $('.info').hide();
    $(this).next('div:first').show();
    //replace stuff inside #content with .info in the div under each box
    $("#content").html($(this).find(".info"));

});