jquery - Jquery 相同的类显示一个隐藏其他的 jsfiddle 包括

Question

我正在尝试使用此代码制作画廊。

如果我有两个单独的按钮和内容容器，它可以工作，但是有没有办法只使用一个容器来存放所有内容？

此外，不使用额外的类，如（一，二，三，...）

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

编辑：我误解了你的问题，所以这不是你想要的。这只是打开/隐藏您单击的按钮下的 div。使用另一个答案，非常简洁。

添加以下两行：

    $('.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"));

});

Answer 2

改变这个：

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

对此：

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

jsFiddle 示例

.find()遍历元素的子元素；你想要.next()获得下一个兄弟元素。