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 函数。

无论如何，即使是这样，那也是错误的方法：您只检查一次， on $(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');
  }
}

Answer 2

您需要删除其中一个类：

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

Answer 3

试试这个删除旧类添加新类

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