Переключить одну и ту же строку таблицы с помощью двух разных функций переключения

Я пытаюсь переключить строку сведений через два разных источника.

  1. Если пользователь щелкает имя или 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>

Яваскрипт:

//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');
            }
        );  
    }
);

html toggle jquery tablerow
person dmr    schedule 25.01.2011    source источник
comment
Возможно, стоит ознакомиться с функцией toggleClass в jquery. Это не помогает напрямую с двумя вещами, переключающими одно и то же, но позволит вам писать более чистый код без двух почти идентичных функций (поскольку они просто отличаются вызовом класса add/remove).   -  person Chris    schedule 25.01.2011

Ответы (3)


arrow_upward
2
arrow_downward

Вы можете использовать click() вместо toggle(), а затем показать или скрыть в зависимости от класса, который в настоящее время применяется к строке.

person derek    schedule 25.01.2011

arrow_upward
0
arrow_downward

Не могли бы вы сослаться непосредственно на класс?

person Gerardo Jaramillo    schedule 25.01.2011
comment
что вы можете получить доступ к DOM строки непосредственно из CLASS, например, $(.infoRow) и изменить его, как вы намереваетесь... Я думаю, что это может быть решением - person Gerardo Jaramillo; 25.01.2011

arrow_upward
0
arrow_downward

почему бы вам не заменить функции в первом переключателе: "$('.name, .addressAlert').toggle"

а затем инициализируйте все информационные строки с показанным классом, поэтому при первом нажатии он будет отображаться, даже если пользователь нажал «переключить ВСЕ»

person Dror Hilman    schedule 25.01.2011