我需要一個想法如何解決以下問題。
我正在開發一個博客文章的喜歡/不喜歡系統，它只在本地存盤中記住用戶喜歡的內容。
問題是，當我喜歡這篇文章時，按鈕會被禁用（應該如此），但是當我重新加載頁面時，喜歡的數量會增加（喜歡按鈕仍然被點擊）。我該如何解決這個問題？
<!-- 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>
uj5u.com熱心網友回復：
要完成此任務，您需要在檔案中添加以下代碼，用于喜歡和不喜歡并保存在本地存盤中
$(".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>如果您得到任何幫助，請為我的回答點贊！
uj5u.com熱心網友回復：
在您的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.addEventListenerfrom JavaScript 中。這不是它的作業原理。
PHP 代碼總是被執行——它不知道你在 JavaScript 的某些代碼中。PHP 和 JavaScript 不能以這種方式相互協作。
這就是為什么它總是在計數。
您可以向另一個 PHP 腳本發送請求，該腳本對值進行計數并重繪 按鈕。
您所說的 localstorage 實作不存在于您的代碼中，所以我不能談論它。但這肯定是您在問題標題中描述的錯誤。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/334636.html
標籤：javascript html 查询 本地存储