按鈕在頁面重新加載時保持點擊狀態

Question

我需要一個想法如何解決以下問題。

我正在開發一個博客文章的喜歡/不喜歡系統，它只在本地存儲中記住用戶喜歡的內容。

問題是，當我喜歡這篇文章時，按鈕會被禁用（應該如此），但是當我重新加載頁面時，喜歡的數量會增加（喜歡按鈕仍然被點擊）。 我該如何解決這個問題？

---

<!-- Likes button -->   
                    <button id="likebtn" type="button">                  
                            <input type="number" id="input1" value ="<?php echo $post_likes;?>"</input>    
                    </button>


                    </p>
                        <script>
                            let likebtn = document.querySelector('#likebtn');
                            let input = document.querySelector('#input1'); 

                            //local storage - saving ID of liked post
                            var likedID = parseInt('<?php echo $link_post_id ?>');
                            var likedIDhistory = JSON.parse(localStorage.getItem("arrayOfLikedPosts")) || [];
                            var isLiked = false;

                            for (var i = 0; i < likedIDhistory.length; i++){
                                var arrayLS = JSON.parse(localStorage["arrayOfLikedPosts"]);
                                var actual = arrayLS[i];
                                
                                if(likedID == actual) {
                                    isLiked= true;
                                    console.log("true");
                                }                            
                            }

                            //if is not liked by "user"
                            if (isLiked == false) {                                                       
       
                            likebtn.addEventListener('click', likes_function=>
                            {
                            input1.value = <?php echo $post_likes?> + 1;
                            input.style.color = "#a1c4fd";

                            <?php
                            $like_query = "UPDATE posts SET post_likes_count=post_likes_count +1 WHERE post_id=$link_post_id";
                            $send_query2 = mysqli_query($connection, $like_query);

                            $query2 = "SELECT * FROM posts WHERE post_id=$link_post_id";
                            $like_post_query = mysqli_query($connection, $query2);
                            ?>  

                            likedIDhistory.push(likedID);
                            localStorage.setItem("arrayOfLikedPosts", JSON.stringify(likedIDhistory));
                            document.getElementById("likebtn").disabled = true;
                            document.getElementById("likebtn").style.opacity=0.5; 
                         });


                            //if is already liked by "user"
                            } else {
                                document.getElementById("likebtn").disabled = true;
                                document.getElementById("likebtn").style.opacity=0.5;
                            }                  

                        </script>

---

Answer 1

在您的script標簽中，您有一個<?php代碼，它總是更新喜歡計數：

<?php
  $like_query = "UPDATE posts SET post_likes_count=post_likes_count +1 WHERE post_id=$link_post_id";
  $send_query2 = mysqli_query($connection, $like_query);

  $query2 = "SELECT * FROM posts WHERE post_id=$link_post_id";
  $like_post_query = mysqli_query($connection, $query2);
?>  

看來您打算讓 PHP 代碼只執行將其likebtn.addEventListener來自 JavaScript 的likebtn.addEventListener 。 這不是它的工作原理。

PHP 代碼總是被執行——它不知道你在 JavaScript 的某些代碼中。 PHP 和 JavaScript 不能以這種方式相互協作。
這就是為什么它總是在計數。

您可以向另一個 PHP 腳本發送請求，該腳本對值進行計數並刷新按鈕。

您所說的 localstorage 實現不存在於您的代碼中，所以我不能談論它。 但這肯定是您在問題標題中描述的錯誤。

Answer 2

要完成此任務，您需要在文件中添加以下代碼，用於喜歡和不喜歡並保存在本地存儲中

 $(".like-btn").click( function() { $(this).toggleClass('clicked'); event.preventDefault(); }); $(".panel-group_btn span").click(function(){ var btnStorage = $(this).attr("id"); if($(this).hasClass("clicked")) { localStorage.setItem(btnStorage, 'true'); } else { localStorage.removeItem(btnStorage, 'true'); } }); $( ".panel-group_btn span" ).each(function() { var mainlocalStorage = $( this ).attr( "id" ); if(localStorage.getItem(mainlocalStorage) == 'true') { $(this).addClass("clicked"); } else { $(this).removeClass("clicked"); } });

 body, a {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; text-decoration:none; } a.panel-group_btn {color: #888;display:block;} a.like-btn { color: #888; font-size: 14px; } span.clicked { color: #00dfae; font-weight:bold; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h1>Like button</h1> <p>Uses the span's id to name the Local Storage key. Check Local Storage in your inspector to see the saved keys.</p> <a class="panel-group_btn" href="#" > <span id="like-01" class="like-btn"> Like </span> </a> <a class="panel-group_btn" href="#" > <span id="like-02" class="like-btn"> Like </span> </a> <a class="panel-group_btn" href="#"> <span id="like-03" class="like-btn"> Like </span> </a>

如果您得到任何幫助，請支持我的回答！