如何在点击 5 次 jQuery 后隐藏按钮？

Question

简而言之，我有多个帖子，每个帖子都有具有唯一数据点击属性的下载按钮，例如data-click="1"用于帖子 1 下载按钮， data-click="2"用于帖子 2 下载按钮等等。 我希望如果下载按钮为帖子 1 单击 5 次，然后在单击 5 次后它会隐藏，如果刷新页面，它也会保持隐藏，我已经编写了一些代码，但它没有隐藏按钮

               <script>//this script is responsible for adding a unique data-click= 0,1,2,3,4.....n to each resume post respectively.
                    $(document).ready(function() {
                      var PostId = 2;
                         var i = 1;  
                    $('.gotocls').each(function() {
                      jQuery(this).attr('data-click', i);
                      var ClickId = $(this).attr('data-click');
                      var LocalKey = PostId + '+' + ClickId;
                      if(localStorage.getItem(LocalKey)){
                        if(localStorage.getItem(LocalKey) == '5'){
                          $(this).hide();
                        //  alert('im m new here');
                        }
                      }
                      else{
                        localStorage.setItem(LocalKey,0);
                        alert('im game');
                      }
                       i++ 
                    });
                    });
            </script>

上面的代码为每个下载按钮添加唯一的数据点击属性，并检查 localstorage 值是否为 5

       <script type="text/javascript">
        
              $(document).ready(function(){
               $(".gotocls").click(function() {
                   var PostId = 2;
                  var ClickId = $(this).attr("data-click");
                 var LocalKey = PostId + '+' + ClickId;
                 count = localStorage.getItem(LocalKey);
                 count ++;
                   if(count > 5){
                        alert(count);
                            localStorage.setItem(LocalKey, 5);
                            $(this).hide();
                   }
                   else{
                    alert(count);
                        alert('imnot here');
                     localStorage.setItem(LocalKey, count);
                   }
               });
              });
    </script>

和我的 html 代码

<a  class="dkpdf-button gotocls" href="javascript:return false;">Download Now</a>

Answer 1

为了更好的理解，我设置了简单的代码HTML

<div>
    <button id="gotocls" class="gotocls">Download</button>
</div>

脚本

    <script type="text/javascript">

    $(document).ready(function () {
        var LocalKey = "Click_Count"; // set key paramater
        count = localStorage.getItem(LocalKey); // get data from local storage
       
        if (count >= 5) //condition - if click count equal or greater than 5
        {

            $(".gotocls").hide(); // button hide

        }
    
        $(".gotocls").click(function () {
            //var PostId = 2;
            //var ClickId = $(this).attr("data-click");
           
            
            count++;
            if (count >= 5) {
                alert(count);
                localStorage.setItem(LocalKey, 5);
                $(this).hide();
            }
            else {
                alert(count);
                alert('imnot here');
                localStorage.setItem(LocalKey, count);
            }
        });
    });
</script>

您可以根据您的要求更改 javascript，这将在客户端工作