1

I am creating a custom wordpress theme and i am little stuck in one situation, Actually i added a download link button and add some Java Script on it. The button on all posts showing and downloading fine, but according to the Java Script,the (shortcode button/download link button) is only clicked 2 times, after 2 times it automatically disappears.

The Java Script code is working fine only for very first post. for other posts it does not work.

here below is my code:-

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
            <script>
               $(document).ready(function(){
                  var i = 0
                     $(".gotocls").click(function(){
                         i++
                            if(i == 2)
                             document.getElementsByClassName('gotocls')[0].style.display = 'none';
                    
                    });
            ``  });
     
         </script>  

          <a class="dkpdf-button gotocls" href="www.downloadlink.com"  target="_blank"><span class="dkpdf-button-icon"><i class="fa fa-file-pdf-o"></i></span> <?php echo $pdfbutton_text;?></a>`

Here's a screenshot for the HTML code:

image

  • why added '[0]' to ur JS, arent u intentionally limiting it to 0, which is the first post... try removing the [0] from the code – Aditya Agarwal Sep 1 at 12:26
  • if i remove [0] or if i remove 0 from [] , then code dosent work for 1st post also – Jain Sep 1 at 13:04
  • Could u please provide me with the link of the page, as u havent included HTML for the post content, To be honest i didnt really understand your question, the JS u showed is repsonsible for hiding the PDF BUTTON, and not showing the actual posts, and ur question is about why only 1 post is shown...so kinda confused, though it seems to be simple, once I understand the issue – Aditya Agarwal Sep 1 at 13:09
  • Well basically i am working on the localserver before making changes to the final live site....however, from starting point:- – Jain Sep 2 at 5:12
  • 1
    milyin.com In the right Menu bar, you can find the button to toggle theme, and it works based on local storage – Aditya Agarwal Sep 2 at 6:46
1

Okay,

So I had asked you few things in comments for your question, you are yet to answer them, But I shall begin with some things.

So I assume that

1.) for 10 posts, each post has 1 download link unique to it,

2.) each link has the class 'gotocls'

3.) Downloading stuff is working correctly, meaning I just need to get it to hide/show when necessary. 4.) each of the 10 download links have at least 1 class common, from your code it seems that the common class is 'gotocls'

So I pointed out that it does not make sense to use '[0]' in your code for getting the element. You pointed out that it works perfectly for the first download link, that is because you are only targeting the first link with [0], I have not tested, but I think, you can get to the 2nd Link, using '[1]' because that's how it works.

HTML should look like this.

<a class="gotocls" data-click="0">0</a>
<a class="gotocls" data-click="0">0</a>
<a class="gotocls" data-click="0">0</a>
<a class="gotocls" data-click="0">0</a>
<a class="gotocls" data-click="0">0</a>
<a class="gotocls" data-click="0">0</a>

**Please not that the data-click="0" attribute is really necessary for code to work, so please add it to your html. **

In case due to some limitations you cannot put the data attribute then please use this JS, but I do not recommend JS for adding data-attributed on page load, as html seems to be much more logical and efficient thing to do

$(document).ready(function() {

$('.gotocls').each(function() {
     $(this).attr('data-click', '0');
});
});

And your code doesn't work when trying all the 10 link clicks. So, based on the inputs and based on lack of HTML, below is my approach, please try it and let me know in comments to my answer, I think this one should work.

 $(document).ready(function(){
   $(".gotocls").click(function() {
     count= $(this).attr("data-click");
     count ++;
       if(count==5){
                $(this).hide();
       }
       else{
            $(this).attr('data-click', count);
       }
   });
  });
| improve this answer | |
  • as you have instructed me to add data-click="0" in the each link the above code finally works for me. Thank you for your great help and quick replies. I appreciate your work. – Jain Sep 2 at 6:24
  • Super Happy to help you, may you keep growing, I added JS to automattically add data attribute by default just in case you need it. Please upvote if you liked by answer, and stay blessed, and remember Code Is Poetry – Aditya Agarwal Sep 2 at 6:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.