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

jQuery - Find Val of Select Box and print to body class

本文关键字：打印 正文 选择 jQuery      更新时间：2023-09-26

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

我希望拥有它，以便在值更改时它会自动将旧类交换为新类（值）这是我正在为其处理的脚本的 js 小提琴。

它正在更改类，但在页面加载时找不到选择框的初始值。

任何帮助都会很棒！

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

我认为问题出在您的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
});

演示

设置你的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
    })
});

演示

试试这个：

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

在这里摆弄。

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
    });
})
相关文章：