0

選択ボックスの値を本体クラスに出力する小さなスクリプトを作成しようとしています。

値が変更されると、古いクラスが新しいクラス (値) に自動的に交換されるようにしたいと考えています。これは、私が取り組んでいるスクリプトの 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
})
4

4 に答える 4

0

これを試して：

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

ここでフィドル。

于 2013-11-08T07:02:57.513 に答える
0 
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
    });
})
于 2013-11-08T07:16:59.013 に答える
0

selector問題はこれを試すことにあると思いますが、

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

また、 addClass()またはremoveClass( )の代わりにtoggleClass( )を使用することもできます。

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

デモ

于 2013-11-08T06:59:05.440 に答える