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

改变这个：

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

到此：

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

<强> jsFiddle example

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

Answer 2

编辑：我误解了你的问题，所以这不是你想要的。这只会打开/隐藏您点击按钮下的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"));

});

Jquery同一个类显示一个隐藏其他jsfiddle包括在内

2 个答案: