選擇放置框選項時交換類

Question

我有一個下拉框，其中包含「垂直」和「水平」選項。

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

當一個選項，從下拉框中我希望它改變類「體包裝水平導航」，以「身體裹垂直導航」採摘。

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