Question

我有一个简单的下拉列表，根据所选内容显示和隐藏div。

我希望每个选择都能显示两个div（＆＃34; .buzzard＆＃34;和＆＃34; .pattern1＆＃34;）但我无法弄清楚如何标记它们。

请参阅Fiddle

<div class="dropdown">
  <select id="opts" data-target=".my-info-1">
    <option value="buzzard" data-show=".buzzard">Buzzard</option>
    ...
  </select>
</div>

<div class="my-info-1">
  <div class="buzzard hide">The buzzard is by far the most common of all our birds of prey, and its expansion has been dramatic</div>
  ...
  <div class="pattern1 hide"><h4>Distribution</h4><img src="#"></div>
  ...
</div>

<script>
$('select#opts').change(function() {
  var target = $(this).data('target');
  $(target).children().addClass('hide');
  var show = $("option:selected", this).data('show');
  $(show).removeClass('hide');
});
</script>


.hide {
  display: none;
}

我试过了

<option value="buzzard" data-show=".buzzard .pattern">Buzzard</option>

Answer 1

您应该使用，比如.buzzard,.pattern

请记住，$接受selector css syntax和＆＃39; ＆＃39; 后代＆＃39;逗号头脑＆＃39; 或＆＃39;

示例：

$('.class1 .class2')将捕获class2中的元素，它们位于具有类class1

的其他元素中

<div class="class1">
    <div>
       <div class="class2">
       </div>
    </div>
</div>

$('.class1, .class2')将使用clases class1或class2

来捕获元素

<div class="class1 class2">
</div>

示例： https://jsfiddle.net/L0zpg6d0/4/

选项标签：如何显示多个类

1 个答案: