javascript - 单击按钮时 jquery 切换 <td>

Question

我有一个表格，里面有一些元素，每个元素都有一个按钮，可以显示菜单上特定元素的更多信息。

我的 HTML 表格在下面

<table id="menu_breads">
    <thead>
        <tr>
            <th colspan="2">BREADS</th>
        </tr>
        <tr>
            <th>ITEM</th>
            <th>PRICE</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Portugese Rolls
                <button class="myButton">&#x2C5</button>
            </td>
            <td>R1.49</td>
        </tr>
        <tr>
            <td colspan="2" class="more">A hand made selection of Portugese rolls</td>
        </tr>
        <tr>
            <td>Hotdog Buns
                <button class="myButton">&#x2C5</button>
            </td>
            <td>R0.99</td>
            <tr>
                <td colspan="2" class="more">A hand made selection of Hotdog buns</td>
            </tr>
        </tr>
        <tr>
            <td>French Loaf
                <button class="myButton">&#x2C5</button>
            </td>
            <td>R3.49</td>
            <tr>
                <td colspan="2" class="more">A hand made selection of French loaves</td>
            </tr>
        </tr>
        <tr>
            <td>Sead Roll
                <button class="myButton">&#x2C5</button>
            </td>
            <td>R2.49</td>
            <tr>
                <td colspan="2" class="more">A hand made selection of Seed Rolls</td>
            </tr>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">
                 <h6>Prices may change without prior warning</h6>

            </td>
        </tr>
    </tfoot>
</table>
<!-- TABLE FOR CONFECTIONARIES -->
<table id="menu_confect">
    <thead>
        <tr>
            <th colspan="2">CONFECTIONARIES</th>
        </tr>
        <tr>
            <th>ITEM (per slice)</th>
            <th>PRICE</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cream Slice
                <button class="myButton">&#x2C5</button>
            </td>
            <td>R12.49</td>
            <tr>
                <td colspan="2" class="more">A hand made selection of Cream slices</td>
            </tr>
        </tr>
        <tr>
            <td>Chocolate Cake
                <button class="myButton">&#x2C5</button>
            </td>
            <td>R15.99</td>
            <tr>
                <td colspan="2" class="more">A hand made selection of Chocolate cakes</td>
            </tr>
        </tr>
        <tr>
            <td>Coconut Eclaire
                <button class="myButton">&#x2C5</button>
            </td>
            <td>R2.49</td>
            <tr>
                <td colspan="2" class="more">A hand made selection of Coconut Eclairs</td>
            </tr>
        </tr>
        <tr>
            <td>Chocolate Eclaire
                <button class="myButton">&#x2C5</button>
            </td>
            <td>R4.49</td>
            <tr>
                <td colspan="2" class="more">A hand made selection of chocolate Eclairs</td>
            </tr>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">
                 <h6>Prices may change without prior warning</h6>

            </td>
        </tr>
    </tfoot>
</table>

我的CSS在这里

.myButton {
    background: #183C4C;
    border-radius: 31%;
    border:2px solid #4e6096;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:11px;
    text-decoration:none;
    width: 15%;
    float: right;
}

.more {
    display: none;
    }

Demo

我对 jquery 的理解有点问题。我是否需要为我想要显示的每个 td 提供 ID，或者我可以使用类和点击切换事件来完成吗？

我已经设法让它在点击时显示，问题是所有隐藏的行都会显示，而不仅仅是单个行。

$(document).ready(function(){

$('.myButton').click(function(){
    $(this).closest('tr').next().find('.more').toggle();

    if ($(this).closest('tr').is(":visible")) {
                $(this).html("&#x2C4")
        }
        else { 
            $(this).html("&#x2C5")
        }
});

});

Answer 1

您不必为每个 td 都提供 ID，那样做就太过分了。你想要一些动态的东西。假设您的 HTML 结构保持不变，您可以:

编辑:添加了在评论中切换加号和减号图标的功能

$(".myButton").on("click", function () {
    var more = $(this).closest("tr").next("tr").find(".more");
    more.toggle();

    if (more.is(":visible")) {
       //show minus icon, hide plus
    }
    else {
       //show plus icon, hide minus
    }
});

DEMO (感谢罗里)