使用 2 个不同的切换功能切换同一表行

Question

我试图通过两个不同的来源切换详细信息行。

1. 如果用户单击“名称”或“地址警报”，则显示或隐藏该特定详细信息行。
2. 如果用户单击“切换全部”，则显示或隐藏所有详细信息行。

问题是两个独立的切换函数不知道另一个函数在做什么。因此，例如，如果刚刚单击“切换全部”，现在显示所有详细信息行，则单击单个名称应隐藏该详细信息行。但是，由于单个切换功能最多可“显示”，因此需要单击 2 次才能隐藏该行的详细信息。

HTML：

<div id="toggleAll"></div>
<table>
    <tr class="infoRow"><td class="addressAlert"></td><td class="name"></td></tr>
    <tr class="details"></tr>
    <tr class="infoRow"><td class="addressAlert"></td><td class="name"></td></tr>
    <tr class="details"></tr>
    <tr class="infoRow"><td class="addressAlert"></td><td class="name"></td></tr>
    <tr class="details"></tr>
</table>

JavaScript：

//toggles beween showing and hiding the details for specific row
$(
    function(){
        //if click on carrier name or address alert symbol
        $('.name, .addressAlert').toggle(
            function() {
            //gets the row clicked on, and finds the next row (the details row)
            detailsTds = $(this).parents("tr.infoRow").next();
            //adds the "shown" class, which sets the display to table-row
            detailsTds.addClass("shown");
            },
            function(){
            //gets the row clicked on, and finds the next row (the details row)
            detailsTds = $(this).parents("tr.infoRow").next();
            //removes the "shown" class, thereby setting the display to none
            detailsTds.removeClass("shown");
            }
        );  
    }
);

//toggle ALL details 
$(
    function(){
        //if click on carrier name or address alert symbol
        $('#toggleAll').toggle(
            function() {
            $('.details').addClass("shown");
            $('#toggleAll').text('[-] Hide all addresses');
            },
            function(){
            $('.details').removeClass("shown");
            $('#toggleAll').text('[+] Show all addresses');
            }
        );  
    }
);

Answer 1

您可以使用click()而不是toggle()，然后根据当前应用于该行的类来显示或隐藏。

Answer 2

可以直接引用类吗？

Answer 3

为什么不替换第一个切换中的功能：
“$('.name, .addressAlert').toggle”

，然后使用显示的类初始化所有 infoRows-
因此，即使用户按下“切换全部”，第一次按下它也会显示