Question

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

如果用户点击了Name或AddressAlert，则会显示或隐藏该特定详细信息行
如果用户点击“全部切换”，则会显示或隐藏所有详细信息行。

问题是两个单独的切换功能不知道另一个功能是什么。因此，例如，如果仅单击“切换所有”，现在显示所有详细信息行，则单击单个名称应隐藏该详细信息行。但是，由于单个切换功能最多为“显示”，因此只需单击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'）。切换”

然后使用显示的类初始化所有infoRows- 因此，即使用户按下“toggle ALL”

，第一次按下它也会显示

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

3 个答案: