Javascript jQuery使用类隐藏和显示多个元素

我有一个按钮。同一类，但每页有多个按钮

<button id="btnIpoDetail" style="margin-top: 10px" class="ui button ipodetailbtn"">
<i class="icon newspaper"></i>
Details
</button>

<button id="btnIpoDetail" style="margin-top: 10px" class="ui button ipodetailbtn"">
<i class="icon newspaper"></i>
Details
</button>

我面临的问题是,， 只要有一张桌子就行。但一旦有多个具有相同类名的表，单击一个按钮即可切换所有表。

---

如何解决此问题？

用ID替换类，用唯一的ID名称命名每个表，如

table0

，

table1

，等等。这样，您就可以执行

$（“#table0”）.fadeToggle（“slow”）

或

$（“#table1”）.fadeToggle（“slow”）

给每个按钮一个唯一的ID:

<button id="btnIpoDetail_1" style="margin-top: 10px" class="ui button ipodetailbtn">
    <i class="icon newspaper"></i>
    Details
</button>

<table class="ui unstackable table ipotablec" id="ipoTable_1">
    <thead>
        <tr>
            <th>SO #</th>
            <th>Date</th>
            <th>Qty</th>
            <th>Price (MVR)</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1234</td>
            <td>12-02-2012</td>
            <td>350</td>
            <td>1,234,534/-</td>
            <td>Active</td>
        </tr>

    </tbody>
</table>

---

您要隐藏的表的订单号是否提前知道？您的html是否遵循类似于

然后

然后是另一个

的结构？否。表的数量事先不知道。我有一个Div网格，其中包含了，而表在下面的网格中。表和按钮也在一个大分区中。所以更像是表和按钮按顺序匹配吗？按钮#1用于表格#1，按钮#2用于表格#2。。。等等…？不。只需按按钮1，表1就可以了。即使有多个。下面的答案是可行的，但我需要知道如何在一个循环中做到这一点。计算表的数量，我计划根据数据库生成更多表。因此，没有固定数量的表。因此，在本例中，我被迫使用classes如果是这样，您可以这样做，

$（“table”）.eq（0）.fadeToggle（“slow”）

.eq（0）

表示您正在访问第一个表。类似地，您可以使用

$（“table”）.eq（1）.fadeToggle（“slow”）

切换第二个表，依此类推。是否有任何方法可以计算表的数量，并计算表的数量。像一个环。

<button id="btnIpoDetail_1" style="margin-top: 10px" class="ui button ipodetailbtn">
    <i class="icon newspaper"></i>
    Details
</button>

<table class="ui unstackable table ipotablec" id="ipoTable_1">
    <thead>
        <tr>
            <th>SO #</th>
            <th>Date</th>
            <th>Qty</th>
            <th>Price (MVR)</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1234</td>
            <td>12-02-2012</td>
            <td>350</td>
            <td>1,234,534/-</td>
            <td>Active</td>
        </tr>

    </tbody>
</table>

$(document).ready(function () {

    // Hide all tables with class = "ipotablec"
    $.each($("table.ipotablec"), function () {

        $(this).hide();

    });

    // Click button with id = "btnIpoDetail_1"
    $("#btnIpoDetail_1").on('click', function () {

        // Table with id = "ipoTable_1"
        $("#ipoTable_1").fadeToggle('slow');

    });

    // Click button with id = "btnIpoDetail_2"
    $("#btnIpoDetail_2").on('click', function () {

        // Table with id = "ipoTable_2"
        $("#ipoTable_2").fadeToggle('slow');

    });

});