JavaScript Показать / Скрыть как Фильтры в список div

Question

Нужно создать Javascript, который действует как фильтр в списке элементов div. Например, вот предполагаемая разметка ...

<a href="#" onclick="">Filter Item 1</a>
<a href="#" onclick="">Filter Item 2</a>
<a href="#" onclick="">Filter Item 3</a>
<a href="#" onclick="">Filter Item 4</a>
<a href="#" onclick="">Filter Item 5</a>

<div class="1">Item 1</div>
<div class="1">Item 1</div>
<div class="2">Item 2</div>
<div class="3">Item 3</div>
<div class="1">Item 1</div>
<div class="4">Item 4</div>
<div class="4">Item 4</div>
<div class="1">Item 1</div>
<div class="5">Item 5</div>

Я хочу иметь возможность щелкнуть ссылку для элемента 1 и показать только элементы 1 элемента, скрыть все остальные элементы, щелкнуть ссылку элемента 2 и показать только элементы 2 и скрыть все остальные элементы и т. Д. , Я видел несколько похожих скриптов, но ничего, что, казалось бы, не включало и не выключало div, соответствующие классу.

Answer 1

Это можно легко сделать в Jquery , следующие должны работать для вас, но вы должны изменить свой HTML следующим образом

<a href="#" class="link" id="1">Filter Item 1</a>
<a href="#" class="link" id="2">Filter Item 2</a>
<a href="#" class="link" id="3">Filter Item 3</a>
<a href="#" class="link" id="4">Filter Item 4</a>
<a href="#" class="link" id="5">Filter Item 5</a>

<div class="1">Item 1</div>
<div class="1">Item 1</div>
<div class="2">Item 2</div>
<div class="3">Item 3</div>
<div class="1">Item 1</div>
<div class="4">Item 4</div>
<div class="4">Item 4</div>
<div class="1">Item 1</div>
<div class="5">Item 5</div>

и JavaScript следующим образом

$(document).ready(function(){
 $(".link").click(function(e){
  $("." + e.currentTarget.id).toggle()
 }
});

Answer 2

Если вы установите свой HTML как:

<div id="controls">    
  <a href="#" id="1">Filter Item 1</a>
  <a href="#" id="2">Filter Item 2</a>
  <a href="#" id="3">Filter Item 3</a>
  <a href="#" id="4">Filter Item 4</a>
  <a href="#" id="5">Filter Item 5</a>
</div>
<div id="items">
  <div class="1">Item 1</div>
  <div class="1">Item 1</div>
  <div class="2">Item 2</div>
  <div class="3">Item 3</div>
  <div class="1">Item 1</div>
  <div class="4">Item 4</div>
  <div class="4">Item 4</div>
  <div class="1">Item 1</div>
  <div class="5">Item 5</div>
</div>

Тогда ваш код jQuery может быть таким простым:

$(function(){
    $("#controls a").click(function() {
        $("#items").find("." + this.id).toggle();   
    });
  });

Конечно, вы захотите добавить визуальную индикацию того, что фильтр включается и выключается. Возможно, вы не захотите связывать элементы с каждой ссылкой через id / классы, но вместо этого используйте хранилище данных jQuery, в зависимости от ваших потребностей.

Рабочий пример, протестированный в Firefox, здесь: http://jsfiddle.net/mwolfetech/GetRV/

Редактировать: Это решение похоже на Анто Биниша Каспара , в основном отличается только как изменяется HTML. Я думаю, что данные div, скорее всего, будут хорошей структурой для вашего документа и устраняют необходимость в дополнительных классах для контроля. Это всегда проектное решение - балансировка div (для структурного подразделения) против класса (для категорий). Кроме того, нет необходимости извлекать идентификатор из объекта события, поскольку jQuery предоставляет ссылку this.

Answer 3

Установите идентификатор для каждой ссылки, затем назначьте событие onclick.Там вы можете отфильтровать div, используя идентификатор ссылки по клику.

Как-то так (http://jsfiddle.net/pJRek/1/)

Разметка:

<a href="#" class="bound" id="group_1">Filter Item 1</a>
<a href="#" class="bound" id="group_2">Filter Item 2</a>
<a href="#" class="bound" id="group_3">Filter Item 3</a>
<a href="#" class="bound" id="group_4">Filter Item 4</a>
<a href="#" class="bound" id="group_5">Filter Item 5</a>

<div class="group_1">Item 1</div>
<div class="group_1">Item 1</div>
<div class="group_2">Item 2</div>
<div class="group_3">Item 3</div>
<div class="group_1">Item 1</div>
<div class="group_4">Item 4</div>
<div class="group_4">Item 4</div>
<div class="group_1">Item 1</div>
<div class="group_5">Item 5</div>

И скрипт:

$(document).ready(function(){
    var links = $('.bound');
    var divs = $('div');
    links.click(function(event){
       divs.hide();
       divs.filter('.' + event.target.id).show();
    });
});

Answer 4

Очень простое решение:

<a href="#" onclick="$('DIV').hide(); $('DIV.1').show(); return false;">Filter Item 1</a>

Это, конечно, будет скрывать все остальные div на странице, так что вы должны дать всем какой-то другой класс или поместить в другой div.Тогда код может быть:

<a href="#" onclick="$('#filtered DIV').hide(); $('#filtered DIV.1').show(); return false;">Filter Item 1</a>

<div id="filtered">
    <div class="1"></div>
    ...
</div>

Answer 5

Вы можете использовать jQuery toggle .Ниже приведен простой пример:

    $(document).ready(function() {
        $('#IDOfLink').click(function() {
            $('.class1').toggle("slow");//switch to show/hide when clicked
            //hide other div u wish
        });

        $('#anotherLinkID').click(function() {
            $('.class2').toggle("fast");//switch to show/hide when clicked
            //hide other div u wish
        });
        //...etc...
    });

Answer 6

Дайте им всем другой класс (например, item), а затем сделайте щелчок, чтобы скрыть все item и показать все выбранное значение.