Блог

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

 show_A = function () {$('.a').show(); $('.b').hide(); $('.c').hide();}
show_B = function () {$('.a').hide(); $('.b').show(); $('.c').hide();}
show_C = function () {$('.a').hide(); $('.b').hide(); $('.c').show();} 
  

Затем прикрепите эти функции к ссылкам или чему-то еще. Какова наилучшая практика для абстрагирования такого поведения? Общий объем кода увеличивается на N ^ 2 с увеличением количества divs, что никуда не годится.

Дайте всем тем разделам, которые вы хотите скрыть, общее имя класса, а затем покажите один из них. Нравится:

HTML:

 <div class="a toggle">a div</div>
<div class="b toggle">b div</div>
<div class="c toggle">c div</div>
  

Теперь js:

 show_A = function () {$('.toggle').hide(); $('.a').show();}
show_B = function () {$('.toggle').hide(); $('.b').show();}
show_C = function () {$('.toggle').hide(); $('.c').show();}
  

Способ, которым я справлялся с этим раньше, заключался в том, чтобы просто скрыть их все, а затем показать тот (или те), который вы хотите видеть.

Что-то вроде…

 var showSingleDiv = function(klass) {
    $('.container > div').hide();
    $(klass).show();
};
  

Конечно, вы не хотите скрывать все div , поэтому вам нужно будет настроить все, что .container есть, с вашей собственной разметкой.

При каждом нажатии вы могли бы скрывать все разделы, а затем показывать только тот, который вам нужен.

Вы могли бы использовать класс для пометки соответствующих разделов…

 <div id="a" class="collapse">...</div>
<div id="b" class="collapse">...</div>
<div id="c" class="collapse">...</div>
  

И использовать:

 $(".collapse").hide();
  

Вы можете сделать что-то подобное, добавив общий класс ко всем этим элементам:

 <div class="toggle">a</div>
<div class="toggle">b</div>
<div class="toggle">c</div>

$('.toggle').click(function(){
    $('.toggle:visible').hide();    //Hide all visible 'toggle' div's
    $(this).show();                 //Show the clicked div
});
  

Вы можете использовать :not() селектор.

 show_A = function () {$('.a').show(); $('div:not(.a)').hide();}
  

Возможно, я не понимаю вопроса, но похоже, что он хочет чего-то в этом роде:

 $('div').each().click( function(){
    var cls = $(this).attr('class');
    if( $("div[class*='" cls "']").is(':visible')){ $("div[class*='" cls "']").hide();}//
    else{ $("div[class*='" cls "']").show(); }
}
);
  

// Отказ от ответственности — Я не проверял, работает ли объединенный селектор, но адаптировал его из авторитетного блога.