Как отобразить / отсортировать отдельные элементы div по выбору пользователя - PullRequest
Новая
       8

Как отобразить / отсортировать отдельные элементы div по выбору пользователя

3 голосов
/ 20 июля 2010

Извините, если название не точно описывает то, что я пытаюсь сделать. Я новичок во всем этом, чтобы не сказать больше! Чтобы помочь вам понять, чего я пытаюсь достичь, прочитайте пример ниже.

У меня есть список div, каждый из которых может иметь серию «тегов», как я их назову. Для этого примера я буду использовать красный, синий и зеленый в качестве возможных тегов. С каждым тегом также связана кнопка, по которой пользователь может фильтровать отображаемые элементы. Когда кнопка включена, она будет отображать div с этим конкретным тегом, но когда она выключена, она будет скрывать содержимое с этим тегом. Это если контент не имеет другого тега, который в настоящее время включен.

Красный: ВКЛ

Синий: ВЫКЛ.

Зеленый: ВКЛ

DIV 1: красный

DIV 2: синий

DIV 3: Зеленый

DIV 4: красный, синий

DIV 5: синий, зеленый

DIV 6: зеленый, красный

Поскольку тег Blue отключен, будут отображаться все DIV, кроме DIV 2. Причина, по которой он по-прежнему отображает DIV 4 и DIV 5, заключается в том, что теги Red и Green по-прежнему включены. Если вы отключите тег Red, будут отображаться только DIVs 3, 5 и 6, поскольку включен только Green.

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

Если бы кто-то мог указать мне правильное направление относительно того, что я мог бы использовать для достижения этой цели, я был бы признателен за это!

Ответы [ 4 ]

1 голос
/ 30 июля 2010

Вот рабочий пример того, как вы могли бы сделать это: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script> 

   <script type="text/javascript"> 
   //<!--
      $(document).ready(function() {
         var buttons = {
            'red': $('<input type="button"></input>').val('RED: on'),
            'green': $('<input type="button"></input>').val('GREEN: on'),
            'blue': $('<input type="button"></input>').val('BLUE: on')
         };
         var tags = [];
         var _updateTaggedElements = function() {
            // somewhat optimized if...then...else
            if (0 == tags.length) {
               $('#taggedElements > .red,.green,.blue').hide();
            } else {
               $('#taggedElements')
                  .find('.' + tags.join(',.')).show().end()
                  .find(':not(.' + tags.join(',.') + ")").hide()
               ;
            }
         };

         $.each(buttons, function(c,el) {
            tags.push(c); // all tagged elements initially visible...
            $('#buttons').append(el.click(function() {
               var state = /off$/.test(el.val());
               var tagIndex = $.inArray(c, tags);
               el.val(c.toUpperCase() + ": " + (state ? 'on' : 'off'));

               if (state) {
                  if (-1 == tagIndex) {
                     tags.push(c);
                  }
               } else if (-1 != tagIndex) {
                  tags.splice(tagIndex, 1);
               }

               _updateTaggedElements();
            }));
         });

      });
   //-->
   </script>    
   <title>Button selector test</title>
</head> 
<body> 
   <div id="buttons"></div>

   <div id="taggedElements">
      <div class="red">DIV 1: Red</div>
      <div class="blue">DIV 2: Blue</div>
      <div class="green">DIV 3: Green</div>
      <div class="red blue">DIV 4: Red, Blue</div>
      <div class="blue green">DIV 5: Blue, Green</div>
      <div class="green red">DIV 6: Green, Red</div>
   </div>

</body> 
</html>

Конечно, измените это для своих нужд, но, как вы видите, это довольно просто и мало для реализации.Используя массив tags, вы можете иметь столько комбинаций тегов, сколько хотите.

0 голосов
/ 20 июля 2010

Итак, у вас есть логика ИЛИ:

Если красный ИЛИ синий ИЛИ зеленый не выключен, показать деление.

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

0 голосов
/ 28 июля 2010

Я не думаю, что это можно решить с помощью одного только CSS, так как у вас есть несколько DIV с несколькими цветами.Возможно, вы можете смоделировать это в CSS, но это, вероятно, будет не очень элегантно.Я не работал с JavaScript долгое время или вообще вообще, поэтому решение может потребовать некоторой очистки или синтаксиса, возможно, потребуется проверить, но я думаю, что у меня есть потенциальный фрейм, с которым вы могли бы работать.

Вы устанавливаете свои три цветных кнопки вверх и получаете функцию onClick (или эквивалент jQuery). 

<input type="button" id="buttonRed" name="buttonRed" onclick="theSwitch('red')" />
<input type="button" id="buttonGreen" name="buttonGreen" onclick="theSwitch('green')" />
<input type="button" id="buttonBlue" name="buttonBlue" onclick="theSwitch('blue')" />

Затем для DIV вы можете поместить их в цикл (может быть, лучшее решение... как, может быть, заставить функцию заставить цикл пройти снова, чтобы он не всегда работал).

Вот функция.Конечно, перед кнопками. 

function theSwitch(color) {
    if (color === 'red') {
        var redStatus = 0;
        return redStatus;
    }
}

Теоретически (поскольку я не проверяю это), мы меняем переменную на ноль, потому что мы хотим сравнить значения для div s, которые имеют несколько цветов.Я полагаю, что именно так вы можете проверить два цвета: 

if (redStatus === 0 && greenStatus === 0) {
    document.getElementById("divRedGreen").style.display = "none";
}

Как вы можете видеть здесь, для того, чтобы скрыть их, необходимо нажать ОБА кнопки, что является вашим желаемым эффектом.

Вы можете сделать много-много вариаций в зависимости от того, что вы пытаетесь сделать, или от того, что наиболее организовано, но я думаю, что это может помочь в качестве свободной базы.

0 голосов
/ 20 июля 2010

Я думаю, что самый простой способ сделать это, чтобы ваши "теги" были непосредственно реализованы как классы.Любой div может иметь несколько классов, поэтому class = "red blue" - не проблема.

Тогда вам просто нужно немного javascript, чтобы при необходимости изменить класс 'display на' none '.

Lookв функции getElementsByClassName () javascript или в селекторе класса jQuery, чтобы получить все div с классом, равным тому, что только что изменилось, итерировать по ним и вычислять новое значение каждого атрибута стиля «display».

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...