jQuery переключает видимость двух соседних участков - PullRequest
Новая
       0

jQuery переключает видимость двух соседних участков

1 голос
/ 29 ноября 2009 
<span class='act_inact active'>Active</span><span class='act_inact inactive'>Inactive</span>

Когда я нажимаю .active, он должен стать скрытым, а .inactive должен отображаться и наоборот Поскольку это классы, на странице их много. 

$('.act_inact').click(function() {                                  
            $(this).toggle();
            $(this).closest('.act_inact').toggle(); 
        });

Это ничего не делает, но я не совсем понимаю, почему? Я бы предпочел использовать closest (), чтобы избежать необходимости использовать next () и prev ().

Ответы [ 2 ]

2 голосов
/ 29 ноября 2009

Вы неправильно понимаете метод closest.

Ближайший метод возвращает ближайший родительский элемент элемента, соответствующий условию. Например, $('td').closest('table') вернет таблицу, которая непосредственно содержит td. (Если таблица находится внутри другой таблицы, она вернет самую внутреннюю)

Вы можете использовать методы nextAll или prevAll вместе с селектором :first, чтобы найти ближайший элемент после или перед вашим элементом, или вы можете использовать метод siblings, чтобы найти все родственные элементы элемента но я не думаю, что есть простой способ найти ближайшего брата.

Я бы порекомендовал вам вложить все переключаемые пары в отдельные элементы, например: 

<div class="Togglable">
    <span class="Active">Hello!</span>
    <span class="Inactive">Goodbye!</span>
</div>

Вы можете написать 

$('.Togglable span').click(function() {                          
    $(this).parent().children().toggle(); 
});
0 голосов
/ 29 ноября 2009 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.3.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $("span.adjSpan").toggle(function() {
                $("span.active").hide();
                $("span.inactive").show();
            }, function() {
                $("span.inactive").hide();
                $("span.active").show();
            });
        });
    </script>
    <style type="text/css">
        .active {
            display: block;
        }

        .inactive {
            display: none;
        }

        .adjSpan { }
    </style>
</head>
<body>
    <span class='adjSpan active'>Active</span><span class='adjSpan inactive'>Inactive</span>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...