使用js從bootrap模式獲取cookie的值

Question

我正在嘗試創建具有2個選項的模態：是或否。 當用戶選擇否時，如果value=no no，我將創建一個條件，然后不顯示模式。

問題是我無法完成它。 如果答案是肯定的，我可以操縱信息，則需要顯示一個模態問題，獲取用戶答案，並根據此信息每15天執行一次操作。

我的代碼當前無法正常工作

<script>
    function setCookie(cname, cvalue, exdays) {
        var d = new Date();
        d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
        var expires = "expires=" + d.toGMTString();
        document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
    }

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

    function checkCookie() {

        $('#hewant').on('click', function() {
            var valyes = $(this).text();
            console.log(valyes);
        });

        $('#hedont').on('click', function() {
            var valno = $(this).text();
            console.log(valno);
        });
        var user = getCookie("username");

        if (user != "") {
            alert("Welcome again " + user);
        } else {
            $("#myModalcashout").modal();
            user = "testing me";
            if (user != "" && user != null) {
                setCookie("username", user, 15);
            }
        }
    }
</script>

<body onload="checkCookie()">

    <div class="modal fade" id="myModalcashout">
        <div class="modal-dialog">
            <!-- for modal to active manually->
         <!-- Modal content-->
            <div class="modal-content">

                <div class="modal-body">

                    <p style="text-align:center">test</p>
                    <p style="text-align:center">question</p>
                    <p style="text-align:center">for u</p>
                    <div id="hewant" value="yes"> yes i am </div>
                    <div id="hedont" value="no"> no i dont</div>
                </div>

            </div>

        </div>
    </div>
</body>

Answer 1

我為您重組了代碼。 對於初學者，兩個按鈕都只需要1個偵聽器，可以使用模式中按鈕上的class來分配監聽器（我從div更改為button標簽。

注意：關於cookie操作，“運行此代碼段”在此沙盒環境中不起作用，因此您必須自己進行測試。

現在有一個showModal（）函數，您將在加載時調用該函數，該函數負責顯示模態並將單擊偵聽器附加到模態上的兩個按鈕。

當用戶在模態上單擊“是”或“否”時，我們將得到他們的答案，並將其傳遞給您所要求的checkCookie()函數。

我換成你創建和設置cookie的功能與經過測試和工作（也加入eraseCookie（））的人有所有3個功能很好的解釋這里

 showModal(); function showModal() { // only show modal if cookie for the user is null var user = readCookie("username"); if (user != null) { alert("Welcome again " + user); } else { user = "testing me"; $("#myModalcashout").modal(); // add listener on buttons $('.modalButton').on('click', function() { $('#myModalcashout').modal().hide(); var answer = $(this).val(); console.log(answer); // create a cookie with the users answer to the modal createCookie("username", answer, 15); }); } } 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); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> <div class="modal fade" id="myModalcashout"> <div class="modal-dialog"> <!-- for modal to active manually-> <!-- Modal content--> <div class="modal-content"> <div class="modal-body"> <p style="text-align:center">test</p> <p style="text-align:center">question</p> <p style="text-align:center">for u</p> <button class="modalButton" value="yes"> yes i am </button> <button class="modalButton" value="no"> no i dont</button> </div> </div> </div> </div>

使用js從bootrap模式獲取cookie的值

問題描述

1 個解決方案

解決方案1
1 已采納 2018-01-23 19:44:41

使用js從bootrap模式獲取cookie的值

問題描述

1 個解決方案

解決方案1 1 已采納 2018-01-23 19:44:41

解決方案1
1 已采納 2018-01-23 19:44:41