jQuery: Показать / скрыть несколько элементов на основе частичного имени класса

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

Чего я пытаюсь достичь:

  1. Вариант, выбранный в раскрывающемся списке filteritem
  2. Получите значение элемента и покажите span.item-ii с внутренним html, соответствующим значению
  3. Получить класс, начиная с lid- из span.item-ii
  4. Показать элементы p.ptext с тем же классом и скрыть остальные

Моя разметка выглядит примерно так:

<select name="filteritem" id="filteritem">
  <option value="">- Select One-</option>
  <option value="Feliformia"> Feliformia </option>
  <option value="Caniformia">Caniformia</option>
</select>

<span class="item-ii lid-34 bigtitle">Feliformia</span>
<span class="item-ii lid-2 bigtitle">Caniformia</span>

...

<p class="ptext lid-34 moderate-me">Stenoplesictidae</p>
<p class="ptext lid-34 moderate-me">Percrocutidae</p>
<p class="ptext lid-2 moderate-me">Amphicyonidae</p>
<p class="ptext lid-2 moderate-me">Canidae</p>

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

  $('select#filteritem').live('change', function() {
        var itemselection = $(this).val();

        if(itemselection == '') {
          $('span.itemii').show();
        } else {
          $('span.itemii').each(function() {
                $(this).hide();
                var itemtext = $(this).html();
                if(itemtext == itemselection) {
                   $(this).show();
                }
          });
        }
  });
}

filter jquery jquery-selectors
person kevi kevi    schedule 11.07.2012    source источник
comment
Предполагаю, что это просто недосмотр, но у вас опечатка в коде. В разметке HTML вы используете класс item-ii, но в javascript вы нацеливаетесь на itemii ...   -  person Peter Pajchl    schedule 11.07.2012

Ответы (2)


arrow_upward
0
arrow_downward

Я бы почти изменил выбор на что-то вроде этого

<option value="34"> Feliformia </option>

и код был бы простым

 $('select#filteritem').live('change', function() {
  var itemselection = $(this).val();
  $('.ptext').hide();
  $('span.itemii').hide();
  if(itemselection == '')
     $('span.itemii').show();
  else
     $('.lid-' + itemselection).show();
 });
person Kalel Wade    schedule 11.07.2012
comment
вы также можете сделать значение Feliformia-34, а затем вытащить из него 34, но если вам не нужно, чтобы значение было текстом, тогда не делайте его текстом - person Kalel Wade; 12.07.2012

arrow_upward
0
arrow_downward

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

Наконец, вот как вам нужно это сделать.

Ссылайтесь на мою ЖИВУЮ ДЕМО

HTML:

<select name="filteritem" id="filteritem">
  <option value="">-Select One-</option>
  <option value="Feliformia">Feliformia</option>
  <option value="Caniformia">Caniformia</option>
</select>
<br/>
<span class="item-ii lid-34 bigtitle">Feliformia</span>
<span class="item-ii lid-2 bigtitle">Caniformia</span>

...
<br/>
<p class="ptext lid-34 moderate-me">Stenoplesictidae</p>
<p class="ptext lid-34 moderate-me">Percrocutidae</p>
<p class="ptext lid-2 moderate-me">Amphicyonidae</p>
<p class="ptext lid-2 moderate-me">Canidae</p>​

JQuery:

$('select#filteritem').change(function() {
    var itemselection = $(this).val();
    if (itemselection == "") {
        $('span.item-ii').show();
        $('p.ptext').show();
    } else {
        $('span.item-ii').each(function() {
            if (itemselection == $(this).text()) {
                $('span.item-ii').hide();
                $(this).show();
                var classList =$(this).attr('class').split(/\s+/);
                $.each(classList, function(index, item) {
                    if ($('p.ptext').hasClass(item)) {
                        $('p.ptext').hide();
                        $('p.ptext.'+item).show();
                    }
                });
            }
        });
    }
});​

CSS:

.item-ii {
    display:block;
}​
person Siva Charan    schedule 11.07.2012