选项标签:如何显示多个类
Option tag: how to show multiple classes
我有一个简单的下拉列表,可以根据选择的内容显示和隐藏div。
我希望每个选择都显示两个div(".buzzard"和".pattern1"),但我无法弄清楚如何标记它们。
请看小提琴
<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>
你应该使用 ,喜欢.buzzard,.pattern
请记住,$ 接受选择器 css 语法,并且空格思想"后裔"逗号思想"或"
例:
$('.class1 .class2')
将捕获具有类 2 的元素,即它在类 class1 的其他元素中
<div class="class1">
<div>
<div class="class2">
</div>
</div>
</div>
$('.class1, .class2')
将捕获具有类 1 或类 2 的元素
<div class="class1 class2">
</div>
示例:https://jsfiddle.net/L0zpg6d0/4/
相关文章:
- 在高图表中,每x步只显示标签
- 如何隐藏和显示标签控件JavaScript
- 如何在angular js的ng应用程序中以普通的htm显示标签
- 使用细丝组tablesaw插件时未显示标签
- 用Javascript在具有相同类的按钮上显示标签
- Dijit 按钮显示图标,但不以编程方式显示标签
- 当圆形图像在圆轮中发生变化时,如何在顶部显示标签
- jqPlot - 无法使 x 轴正确显示标签
- 在堆叠条形图上显示标签
- 在酒窝气泡图中的每个气泡内显示标签
- Struts2 显示标签动态链接显示相同的行值
- HTML,显示标签的输入值
- JS sup() 在 html 中显示标签
- 如何在我的WinJS工具栏上显示标签
- d3图表宽度不会在x轴上显示标签
- 如何在鼠标悬停在条形图上时显示标签
- Select2.js-如何防止显示标签
- 我无法在JQChart中显示标签
- 使用 jQuery 验证并尝试在标签无效时突出显示标签
- 将鼠标悬停在圆上时显示标签