Показать / Скрыть несколько Div с Jquery

Question

Я хочу использовать несколько кнопок, чтобы показать / скрыть несколько делений с помощью jquery.

На странице изначально будут показаны все деления.Идея заключается в том, что будет кнопка для сброса (показать все), а затем отдельные кнопки для отображения определенного элемента Div при скрытии остальных.

Любая помощь будет высоко ценится.

<div class="buttons">
<a class="button" id="showall">All</a>
<a class="button" id="showdiv1">Div 1</a>
<a class="button" id="showdiv2">Div 2</a>
<a class="button" id="showdiv3">Div 3</a>
<a class="button" id="showdiv4">Div 4</a>
</div>

<div id="div1">Lorum Ipsum</div>
<div id="div2">Lorum Ipsum</div>
<div id="div3">Lorum Ipsum</div>
<div id="div4">Lorum Ipsum</div>

Answer 1

jQuery(function() {
  jQuery('#showall').click(function() {
    jQuery('.targetDiv').show();
  });
  jQuery('.showSingle').click(function() {
    jQuery('.targetDiv').hide();
    jQuery('#div' + $(this).attr('target')).show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="buttons">
  <a id="showall">All</a>
  <a class="showSingle" target="1">Div 1</a>
  <a class="showSingle" target="2">Div 2</a>
  <a class="showSingle" target="3">Div 3</a>
  <a class="showSingle" target="4">Div 4</a>
</div>

<div id="div1" class="targetDiv">Lorum Ipsum1</div>
<div id="div2" class="targetDiv">Lorum Ipsum2</div>
<div id="div3" class="targetDiv">Lorum Ipsum3</div>
<div id="div4" class="targetDiv">Lorum Ipsum4</div>

http://jsfiddle.net/XwN2L/

Answer 2

Если они попадают в логические группы, Я бы, вероятно, пошел с классовым подходом , уже перечисленным здесь .

Многие люди забывают, что вы можете выбрать несколько элементов по идентификатору в одном и том же селекторе jQuery , а также:

$("#div1, #div2, #div3").show();

Где 'div1', 'div2 'и' div3 '- это все атрибуты id на различных div, которые вы хотите показать сразу.

Answer 3

Назначьте каждому div class. Затем вы можете выполнить действия для всех из них:

$(".divClass").hide();

Таким образом, каждая кнопка может сделать:

$(".divClass").hide()
$("#specificDiv").show();

Вы можете сделать это более общим и использовать очевидное соглашение - кнопка и div с одинаковым номером в id связаны между собой. Итак:

$(".button").click(function() {
  var divId = "#div" + $(this).attr("id").replace("showdiv", "");
  $(".divClass").hide(); 
  $(divId).show();
}

Answer 4

Просто небольшая дополнительная заметка ... Если вы используете это с другими сценариями, $ в последней строке вызовет конфликт.Просто замените его на jQuery, и все хорошо.

jQuery(function(){
     jQuery('#showall').click(function(){
           jQuery('.targetDiv').show();
    });
    jQuery('.showSingle').click(function(){
          jQuery('.targetDiv').hide();
          jQuery('#div'+jQuery(this).attr('target')).show();
    });
});

http://jsfiddle.net/XwN2L/4764/

Answer 5

Отметьте Пример

HTML:

<div class="buttons">
<a class="button" id="showall">All</a>
<a class="button" id="showdiv1">Div 1</a>
<a class="button" id="showdiv2">Div 2</a>
<a class="button" id="showdiv3">Div 3</a>
<a class="button" id="showdiv4">Div 4</a>
</div>

<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>

Javascript:

$('#showall').click(function(){
    $('div').show();
});

$('#showdiv1').click(function(){
    $('div[id^=div]').hide();
    $('#div1').show();
});
$('#showdiv2').click(function(){
    $('div[id^=div]').hide();
    $('#div2').show();
});

$('#showdiv3').click(function(){
    $('div[id^=div]').hide();
    $('#div3').show();
});

$('#showdiv4').click(function(){
    $('div[id^=div]').hide();
    $('#div4').show();

});

Answer 6

Если вы хотите иметь возможность отображать / скрывать отдельные элементы div и / или группы элементов div с меньшим количеством кода, просто примените к ним несколько классов, чтобы при необходимости вставить их в группы.

Пример:

.group1 {}
.group2 {}
.group3 {}

<div class="group3"></div>
<div class="group1 group2"></div>
<div class="group1 group3 group2"></div>

Тогда вам просто нужно использовать идентификатор, чтобы связать действие с целью, и с 5,6 строками кода jquery у вас есть все, что вам нужно.

Answer 7

простой, но глупый подход:

$('#showall').click(function(){
    $('div[id^=div]').show();
});

$('#showdiv1').click(function(){
    $('#div1').show();
    $('div[id^=div]').not('#div1').show();
});

что касается лучшего - добавьте общий класс ко всем элементам div и используйте некоторый атрибут в кнопках с идентификатором целевого элемента div

Answer 8

У меня была такая же проблема, прочитайте этот пост, но закончили сборку этого решения, которое динамически выбирает div, выбирая идентификатор из пользовательского класса на href с использованием функции attr() JQuery.

ВотJQuery:

$('a.custom_class').click(function(e) {
  var div = $(this).attr('href');
  $(div).toggle('fast');
  e.preventDefault();
}

И вам просто нужно создать такую ​​ссылку в HTML:

<a href="#" class="#1">Link Text</a>
<div id="1">Div Content</div>