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>

例如，我希望content3同时显示option1和option2。

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>

Jquery div链接到多个选择值

1 个答案: