jquery - 选择下拉框选项时交换类

Question

我有一个下拉框，其中包含“垂直”和“水平”选项。

<select class="nav-select">
    <option id="one" value="1">Vertical</option>
    <option id="two" value="2">Horizontal</option>
</select>

当从下拉框中选择一个选项时，我希望它将类“body-wrap horizo​​ntal-nav”更改为“body-wrap vertical-nav”。

<div class="body-wrap vertical-nav">

到目前为止，我已经编写了一些 jQuery，但似乎无法让它工作。谁能告诉我哪里出错了？

$(document).ready(function () {

    if ($('.nav-select option').hasId("two")) {
        $("body div").addClass('body-wrap horizontal-nav');       
    } 
    else if ($('.nav-select option').hasId("one") {
        $("body div").addClass('body-wrap vertical-nav');
    }

});

Answer 1

我不认为 hasID() 是一个真正的 jQuery 函数。

无论如何，即使是这样，那也是错误的方法:您只在 $(document).ready() 上检查一次。每次选择更改时都应该检查，可能是这样的:

$('.nav-select').change(function() {
  if ($(this).val() == 1) {
    $('div.body-wrap').removeClass('horizontal-nav').addClass('vertical-nav');
  } else {
    $('div.body-wrap').removeClass('vertical-nav').addClass('horizontal-nav');
  }
}