javascript - jQuery - 查找选择框的值并打印到正文类

Question

我正在尝试编写一个小脚本，将选择框的值打印到正文类。

我希望拥有它，以便当值更改时它会自动将旧类交换为新类（值） 这是我正在为它工作的脚本的 js fiddle。

它可以很好地更改类，但在页面加载时找不到选择框的初始值。

任何帮助都是极好的！

http://jsfiddle.net/BMsP8/

jQuery(document).ready(function () {
// On load

jQuery(document).ready(function () {
    if (jQuery("select[name=mySelections] option:selected").val() == 'myvalue') {
        jQuery("#page_template");
    }
});

jQuery('#page_template').change(function () { // on change event
    jQuery('body')
    //.removeClass() // remove the classes on the body
    // or removeClass('class1 class2 ...') in order to not affect others classes
    .addClass(jQuery(this).val()); // set the new class
})

Answer 1

设置你的html

<select id="page_template">
    <option value="Default">Default</option>
    <option value="class1">First Class</option>
    <option value="class2">2nd Class</option>
</select>

在js中

$(document).ready(function(){
alert($("#page_template").val()); 

if ($("#page_template").val() == 'Default') {
       $('body').addClass($("#page_template").val());      
        }


    $('#page_template').change(function () { // on change event
        $('body').removeClass().addClass($(this).val()); // set the new class
    })

});

演示

Answer 2

Hope this helps

**HTML**

<select id="page_template">
    <option value="myvalue">Default</option>
    <option value="class1">First Class</option>
    <option value="class2">2nd Class</option>
</select>

**JS**

jQuery(document).ready(function () {
    if (jQuery("#page_template option:selected").val() == 'myvalue') {
        jQuery('body').addClass(jQuery("#page_template option:selected").val());
    }
    jQuery('#page_template').change(function () { // on change event
       jQuery('body').removeAttr("class");
       jQuery('body').addClass(jQuery(this).val()); // set the new class
    });
})

Answer 3

我认为问题出在您的selector尝试中，

if (jQuery("#page_template").val() == 'myvalue') {
    alert(jQuery("#page_template").val());
}

您也可以使用toggleClass()代替addClass()或removeClass()之类的，

jQuery('#page_template').change(function () { // on change event
    jQuery('body').toggleClass(jQuery(this).val()); // toggle the class
});

演示

Answer 4

尝试这个：

jQuery('#page_template').change(function () { // on change event
    var cls = jQuery(this).val();
    jQuery('body').removeAttr("class");
    jQuery('body').addClass(cls); // set the new class
});

在这里拉小提琴。