JQuery DIV связан с несколькими значениями выбора

Question

JQuery DIV связан с несколькими значениями выбора

0

Прямо сейчас у меня есть раскрывающееся меню, связанное с id div, но я хотел бы, чтобы он ссылался на div-класс, чтобы можно было показать определенный div в нескольких selections-- перекрывающихся категориях. Я не знаком с этим, поэтому я был бы признателен, если бы кто-то мог помочь!

Вот что я имею до сих пор:

<style>

.odd{
   background-color: #ccc;
  padding: 15px;
}

.even{
   background-color: #eee;
  padding: 15px;
}

  </style>


<script type="text/javascript">
$(function() {
    $("select").change(function() {
        var id = $("option:selected", this).val();
        $("div[id]").each(function() {
            $(this).toggle($(this).attr("id") == id);

        });
     $('.wrapper div:visible:even').css({
            'background-color': '#eee'
        });
        $('.wrapper div:visible:odd').css({
            'background-color': '#ccc'
        });
    });
});

</script>

другая часть:

<select>
<option value="">Choose one:</option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>

</select>


<div class="wrapper">
  <div id="option1" class="odd">content1</div>

  <div id="option2" class="even">content2</div>

  <div id="option3" class="odd">content3</div>

например, я хочу, чтобы content3 отображался как для параметра option1, так и для опции2.

phpnovice 16 апр. 2014, в 20:16

Источник

Теги:

javascript

jquery

html

css

1 ответ

Ещё вопросы

Barmar · Accepted Answer · 2014-04-16T15-48-00.000Z

Один из способов - использовать hasClass() чтобы указать, какие DIV соответствуют этому параметру.

JS:

$(function() {
    $("select").change(function() {
        var id = $(this).val();
        $("div[id]").each(function() {
            $(this).toggle($(this).hasClass(id));
        });
        $('.wrapper div:visible:even').css({
            'background-color': '#eee'
        });
        $('.wrapper div:visible:odd').css({
            'background-color': '#ccc'
        });
    });
});

HTML:

<div class="wrapper">
  <div id="option1" class="odd option1">content1</div>

  <div id="option2" class="even option2">content2</div>

  <div id="option3" class="odd option1 option2">content3</div>
</div>

Спасибо, что сделали только трюк! Теперь, если бы я включил второй выпадающий список, как бы я сделал так, чтобы второй зависел от первого выпадающего списка?
Один из способов - это иметь несколько вторых раскрывающихся списков, а обработчик change первого скрывать и показывать соответствующие, аналогично тому, как он скрывает и показывает DIV.