既存のクラス名を削除し、jQueryとCookieを使用して新しいクラス名を追加するにはどうすればよいですか？

StackOverflow https://stackoverflow.com/questions/804584

質問

クラス名を削除して新しいクラス名に置き換えるにはどうすればよいですか？

<style>
    .red {background-color: #FF0000;}
    .green{background-color: #00FF00;}
    .blue {background-color: #0000FF;}
</style>

<body class="red">
    <ul>
        <li><a href="">red</a></li>
        <li><a href="">green</a></li>
        <li><a href="">blue</a></li>
    </ul>
</body>

この場合、赤、緑、または青をクリックすると、それに応じてボディクラス名が変更されます。また、選択を保存するCookieを作成します。

jQuery .addClassを試してみましたが、機能していますが、既存のクラスの上にクラスを追加しています。また、Cookieを保存できません。

役に立ちましたか？

解決

使用：

$('.red').removeClass('red').addClass('blue');

完全な動作コードは次のとおりです：

$(function() {
    $("a").click(function() {
        var color = $(this).text();
        $("body").removeClass().addClass(color);
        return false;
    });
});

そしてCookie部分について

$(function() {
    $("a").click(function() {
        var color = $(this).text();
        $("body").removeClass().addClass(color);
        createCookie("color",color);
        return false;
    });

    if (readCookie("color") != null) {
      $("body").removeClass().addClass(readCookie("color"));

    }
    else {
      $("body").removeClass().addClass("red");
    }
});

function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else
        var expires = "";
        document.cookie = name+"="+value+expires+"; path=/";
    }

    function readCookie(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for (var i=0;i < ca.length;i++) {
            var c = ca[i];
            while (c.charAt(0)==' ')
                c = c.substring(1,c.length);
            if (c.indexOf(nameEQ) == 0)
                return c.substring(nameEQ.length,c.length);
        }
        return null;
    }

    function eraseCookie(name) {
    createCookie(name,"",-1);
}

こちらの作業例。 QuirksMode に事前作成されたCookieコード（Cookie-Cutter Cookieコード）をありがとう？）

他のヒント

jQueryがなければ、次のような簡単な行でこれを実行できます。

document.getElementsByTagName("body")[0].className = "red";

これにより、要素に割り当てられたクラスが効果的に削除され、必要なクラスに置き換えられます。

Cookieについては、 PPKには、Cookieの読み取り/書き込み/消去を行う簡単な方法がいくつかあります。

createCookie("mySiteCookie", "red", 7); // Set the cookie to expire in 7 days.
readCookie("mySiteCookie"); // Should yield "red"

removeClass も必要です。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top