Question

我有一个下拉框，其中包含选项＆＃34; vertical＆＃34;和＆＃34;水平＆＃34;在它。

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

当从下拉框中选择一个选项时，我希望它更改类＆＃34; body-wrap horizontal-nav＆＃34; to＆＃34; body-wrap vertical-nav＆＃34;。

<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');
  }
}

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');
    }
});

选择下拉框选项时交换类

3 个答案: