javascript - 链接到多个选择值的 Jquery div

Question

现在我的下拉菜单链接到 div id，但我希望它链接到 div 类，以便某个 div 可以在多个选择中显示——可以说是重叠类别。我对此不熟悉，所以如果有人能提供帮助，我将不胜感激!

这是我目前所拥有的:

<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>

例如，我希望针对选项 1 和选项 2 显示 content3。

Answer 1

一种方法是使用 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>