Кнопка шорткода не работает для всех сообщений. Работайте только для первого поста

Я создаю пользовательскую тему wordpress, и я немного застрял в одной ситуации, на самом деле я добавил кнопку ссылки для загрузки и добавил в нее какой-то Java-скрипт. Кнопка на всех сообщениях отображается и загружается нормально, но, согласно Java-скрипту, кнопка (кнопка шорткода/ссылка для загрузки) нажимается только 2 раза, после 2 раз она автоматически исчезает.

Код Java-скрипта работает нормально только для самого первого сообщения. для других должностей это не так работа.

Ниже приведен мой код:-

<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>`

Вот скриншот HTML-кода:

image

Author: Aditya Agarwal, 2020-09-01
Source

1 answers

Хорошо,

Итак, я задал вам несколько вопросов в комментариях к вашему вопросу, вам еще предстоит ответить на них, но я начну с некоторых вещей.

Поэтому я предполагаю, что

1.) для 10 сообщений у каждого сообщения есть 1 уникальная ссылка для скачивания,

2.) каждая ссылка имеет класс 'gotocls'

3.) Загрузка материалов работает правильно, то есть мне просто нужно, чтобы они скрывались/показывались при необходимости. 4.) каждая из 10 ссылок для скачивания имеет как минимум 1 общий класс, из вашего кода это кажется, что общий класс - это 'gotocls'

Поэтому я указал, что не имеет смысла использовать "[0]" в вашем коде для получения элемента. Вы указали, что это отлично работает для первой ссылки для загрузки, потому что вы ориентируетесь только на первую ссылку с [0], я не тестировал, но я думаю, что вы можете перейти по 2-й ссылке, используя "[1]", потому что так это работает.

HTML должен выглядеть так.

<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>

**Пожалуйста, обратите внимание, что атрибут data-click="0" на самом деле это необходимо для работы кода, поэтому, пожалуйста, добавьте его в свой html. **

В случае, если из-за некоторых ограничений вы не можете указать атрибут данных, пожалуйста, используйте этот JS, но я не рекомендую JS для добавления данных, приписываемых при загрузке страницы, так как html кажется гораздо более логичным и эффективным решением

$(document).ready(function() {

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

И ваш код не работает при попытке выполнить все 10 кликов по ссылке. Итак, основываясь на вводимых данных и на отсутствии HTML, ниже приведен мой подход, пожалуйста, попробуйте его и дайте мне знать в комментариях к моему ответ, я думаю, что это должно сработать.

 $(document).ready(function(){
   $(".gotocls").click(function() {
     count= $(this).attr("data-click");
     count ++;
       if(count==5){
                $(this).hide();
       }
       else{
            $(this).attr('data-click', count);
       }
   });
  });
 1
Author: Aditya Agarwal, 2020-09-02 06:28:10