좋아요 버튼 클릭 수 올라가기 질문입니다.

좋아요 버튼 클릭 수 올라가기 질문입니다.

QA

좋아요 버튼 클릭 수 올라가기 질문입니다.

본문

안녕하세요~ 항상 감사드립니다.

 

홈페이지의 각 서브페이지마다 하단에 좋아요를 누를 수 있는 코드를 아래처럼 추가해뒀습니다.

실제로 지금 누르면 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 에 저장하시길 바랍니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 22
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT