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

Answer 2

クラスの 1 つを削除する必要があります。

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