plugins - Shortcode button dosent work for all posts. Work for first post only

admin管理员组

文章数量:1324231

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=".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"  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:

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/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"  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:

• plugins
• php
• functions
• ajax
• javascript

Share Improve this question edited Sep 2, 2020 at 9:41 Aditya Agarwal 27644 silver badges2222 bronze badges asked Sep 1, 2020 at 10:53 JainJain 2977 bronze badges 34

• 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 Commented Sep 1, 2020 at 12:26
• if i remove [0] or if i remove 0 from [] , then code dosent work for 1st post also – Jain Commented Sep 1, 2020 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 Commented Sep 1, 2020 at 13:09
• Well basically i am working on the localserver before making changes to the final live site....however, from starting point:- – Jain Commented Sep 2, 2020 at 5:12
• 1 milyin In the right Menu bar, you can find the button to toggle theme, and it works based on local storage – Aditya Agarwal Commented Sep 2, 2020 at 6:46

 |  Show 29 more comments

1 Answer 1

Sorted by: Reset to default 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);
       }
   });
  });

本文标签： pluginsShortcode button dosent work for all posts Work for first post only