Question

我是JQuery的新手，我慢慢地糊里糊涂，但我真的很难过：（

我有一个包含多个“更多信息”按钮的页面，当点击切换信息时（每个按钮的信息不同）

但是，当我点击第二个“更多信息”按钮时，它只是多次切换第一个按钮（“更多信息”按钮的数量。

我尝试了各种建议的解决方案，但似乎无法让它正常工作：）

这是我目前的代码：

http://pastebin.com/SSxc09Gy

任何帮助都会令人惊讶并感激不尽！

提前致谢：）

Answer 1

这里有一些你的pastebin示例清理version。

清理后的版本删除了样式和javascript以及表格内的html / head标记的重复减速。您是从其他来源加载此数据吗？这就是为什么html / head / body部分在那里？

在您的第二组标记中，您需要将href属性更新为按钮的＃collapse2和包含其他信息的div的id。您使用的javascript查找该href属性以确定要展开的div。

应该这样结束：

<section class="round-border">
    <div>
        <button href="#collapse2" class="nav-toggle">More Information</button>
    </div>
    <div id="collapse2" style="display:none">
        <div id="justify" style="width:574px;text-align:left">
            <p>Second lot of information</p>
        </div>
    </div>
</section>

您还可以通过不要求将其绑定到唯一崩溃ID的方式更改标记和javascript。

如果你这样改变你的标记，通过将div id“collapse1”变成“崩溃”类，你可以让javascript走上dom找到包含按钮的元素和要切换的div jQuery的.closest()方法，然后使用.find()查找可崩溃的div元素。这也很好地展示了jQuery的方法链是多么棒。

新标记

<td colspan="4" style="text-align:right;">
    <section class="round-border">
        <div>
            <button class="nav-toggle">More Information</button>
        </div>
        <div class="collapse hide">
            <div id="justify" style="width:574px;text-align:left">
                <p>Second lot of information</p>
            </div>
        </div>
    </section>
</td>

新js

$(document).ready(function () {
    $('.nav-toggle').click(function () {
        $(this).closest('.round-border').find('.collapse').slideToggle();

        var text = $(this).text();
        $(this).text(text == "More Information" ? "Hide" : "More Information");
    });
});

jsfiddle使用替代解决方案

请注意，这种方法计算量更大，因为jQuery正在进行更多的dom搜索，但它使维护内容更容易，因为您不必担心跟踪崩溃ID号。如果你只是在没有很多元素的少数几个地方这样做，那么额外计算的负面影响应该不明显。

JQuery使用多个具有相同名称的按钮显示/隐藏切换

1 个答案: