gpt4 book ai didi

javascript - 选项标签 : how to show multiple classes

转载 作者:行者123 更新时间:2023-12-03 07:54:55 24 4
gpt4 key购买 nike

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

我希望每个选择都显示两个 div(“.buzzard”和“.pattern1”),但我不知道如何标记它们。

请参阅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>

最佳答案

您应该使用,.buzzard,.pattern

记住 $ 接受 selector css syntax ,空格代表“后代”,逗号代表“

示例:

$('.class1 .class2') 将捕获 class2 的元素,该元素位于 class1 的其他元素内

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

$('.class1, .class2') 将捕获类为 class1 或 class2 的元素

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

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

关于javascript - 选项标签 : how to show multiple classes,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34840832/

24 4 0