1

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

  1. 如果用户单击 Name 或 AddressAlert，则该特定详细信息行将显示或隐藏
  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');
            }
        );  
    }
);
4

3 回答 3

2

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

于 2011-01-25T16:02:30.213 回答
0

你能直接引用这个类吗？

于 2011-01-25T16:14:25.090 回答
0

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

然后用显示的类初始化所有 infoRows - 所以第一次按下它时它会被显示，即使用户按下“toggle ALL”

于 2011-01-25T16:41:13.390 回答