좋아요 버튼 클릭 수 올라가기 질문입니다.
본문
안녕하세요~ 항상 감사드립니다.
홈페이지의 각 서브페이지마다 하단에 좋아요를 누를 수 있는 코드를 아래처럼 추가해뒀습니다.
실제로 지금 누르면 1씩 추가 되면서 올라갑니다. 근데 문제는 다음날이면 리셋이 되고, 반응형임에도 불구하고 모바일에선 0으로 보이네요. ㅎㅎ......
[원하는구현]
1. 사용자 누구나 들어와서 누를때마다 숫자가 1카운트씩 플러스되면서 올라감
2. pc 와 모바일 모두 동일하게 숫자가 보이길 원함
js는 제가 챗gpt한테 물어봐서 저기까지 한건데.. 계속 물어봐도 반복적인 얘기만 해서 여기에 조언을 얻고자 글을 남깁니다..!!
html
<div class="container_count">
<p class="count_p">0</p>
<p>이 페이지가 맘에 들었다면<br>마구마구 눌러주세요!</p>
<br>
<div class="position count_btn">
<a id="btn">
<span class="layer l1"><span class="layer l5"></span></span>
<span class="layer l2"></span>
<span class="layer l3"></span>
<span class="layer l4"></span>
<span class="layer l6"></span>
</a>
</div>
</div>
js
const pageKey = window.location.pathname;
document.addEventListener("DOMContentLoaded", function() {
let count = localStorage.getItem(pageKey);
if (count === null) {
count = 0;
}
document.querySelector(".count_p").textContent = count;
});
document.querySelector(".count_btn").addEventListener("click", function() {
let count = parseInt(document.querySelector(".count_p").textContent);
count += 1;
document.querySelector(".count_p").textContent = count;
localStorage.setItem(pageKey, count);
});
답변 2
디비에 저장 하지 않으셔서 그렇습니다. 추천 비추천은
<div id="bo_v_act">
<?php if ($good_href) { ?>
<span class="bo_v_act_gng">
<a href="<?php echo $good_href.'&'.$qstr ?>" id="good_button" class="bo_v_good"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i><span class="sound_only">추천</span><strong><?php echo number_format($view['wr_good']) ?></strong></a>
<b id="bo_v_act_good"></b>
</span>
<?php } ?>
<?php if ($nogood_href) { ?>
<span class="bo_v_act_gng">
<a href="<?php echo $nogood_href.'&'.$qstr ?>" id="nogood_button" class="bo_v_nogood"><i class="fa fa-thumbs-o-down" aria-hidden="true"></i><span class="sound_only">비추천</span><strong><?php echo number_format($view['wr_nogood']) ?></strong></a>
<b id="bo_v_act_nogood"></b>
</span>
<?php } ?>
</div>
이걸 토대로 하셔야 합니다.
지금 위 내용은 집에 저장하지 않고 "나만 보이게" 저장했기 때문에 타인 및 모바일 등에서 보이지 않는 겁니다.
디비에 저장해야 누군가 볼 수 있는거니깐요
$("#good_button, #nogood_button").click(function() {
var $tx;
if(this.id == "good_button")
$tx = $("#bo_v_act_good");
else
$tx = $("#bo_v_act_nogood");
excute_good(this.href, $(this), $tx);
return false;
});
// 이미지 리사이즈
$("#bo_v_atc").viewimageresize();
});
function excute_good(href, $el, $tx)
{
$.post(
href,
{ js: "on" },
function(data) {
if(data.error) {
alert(data.error);
return false;
}
if(data.count) {
$el.find("strong").text(number_format(String(data.count)));
if($tx.attr("id").search("nogood") > -1) {
$tx.text("이 글을 비추천하셨습니다.");
$tx.fadeIn(200).delay(2500).fadeOut(200);
} else {
$tx.text("이 글을 추천하셨습니다.");
$tx.fadeIn(200).delay(2500).fadeOut(200);
}
}
}, "json"
);
}
위 상황을 조금 더 이해를 돕기 위해 ,
제가 질문자님에게 현금 1천원씩 계속 줄려고 버튼을 눌렀더니,
실제로는 줬다고 보여질 뿐 질문자님 계좌에 입금되지 않고 그냥 장난쳐 놓은 것과 같습니다.
은행이라는 곳에 실제로 "입금" 되어야 내 통장 + 출금이 되는 것과 같이
해당 데이터 좋아요 숫자를 어딘가 저장해놔야겠죠?^^
아하~ 이해했습니다. 좋은 답변 감사드립니다. 제가 디자인이랑 퍼블만 하줄 알아서, 디비쪽을 전혀 몰라요 ㅋㅋ ㅠㅠ 그래서 챗gpt한테 저 소스라도 받은 상황 ㅋㅋㅋ 이제 알려주신대로 하려면...어떻게 해야 되는지 또 고민을 해봐야겠네요 ㅎㅎ;
코드를 보시면
localStorage.setItem(pageKey, count);
웹브라우저의 로컬스토리지에 저장하고 있습니다.
즉, 이건 다음날 리셋되는 문제 이전에
브라우저로 접속하는 사람마다 카운트가 틀려지게 됩니다.
먼저 댓글 주신 분대로 DB 에 저장하시길 바랍니다.
아 넵 DB저장...(메모메모...) 근데 그걸 어떻게 하는지 모르네요 제가 ㅋㅋㅋㅋ ㅠㅠ 의뢰를 맡겨야겠네요
