Как получить Post_ID () и эхо в переменной Javascript?

Question

Итак, я хочу сделать что-то уникальное для каждого цикла.В моем цикле у меня есть кнопка, которая ссылается на каждый пост.Но у меня также есть событие onClick на кнопке, которая добавляет другой класс.

Так что, в принципе, если я нажимаю кнопку, добавляется класс, который превращает кнопку в красный цвет.Кроме того, мне пришлось поместить тег <script> в цикл, потому что в противном случае все кнопки на странице становятся красными, поскольку страница отображает около 5 циклов (сообщений).

Итак, я пытаюсь нацелиться только на кнопку одного цикла.(Надеюсь это имеет смысл).

Итак, вот пример:

<?php
while (have_posts()) : the_post();
...

<a class="post-<?php the_ID()?> downloadButton" onClick="downloadSuccess();">text</a>


<script>
  function downloadSuccess() {  
var x = document.getElementsByClassName("downloadButton");
var i;
for (i = 0; i < x.length; i++) {
  x[i].classList.add("downloadButton-active"); 
}  
} 
</script>


...
?>

То, что я хочу, это нацелить кнопку каждого цикла с помощью the_ID () и статический класс.

Пример:

var x = document.querySelectorAll('.downloadButton,.post-<?php echo the_ID() ?>'); 

Но это не сработает, наверное, потому что вы не можете отобразить php внутри javascript?

Кроме того, есть ли способ неположить javascript внутри цикла, но при этом все же нацелить кнопку каждого цикла на основе the_iD ()?Я бы не хотел ставить javascript для каждого цикла, просто чтобы назначить кнопку для каждого цикла.

Кто-нибудь может помочь?

Answer 1

try

<a href="#" id="<?php the_ID()?>" class="downloadButton">text</a>

выйти из цикла:

<script>
  document.addEventListener( 'click', function( event ) {
    event.preventDefault();
    if (!event.target.matches('.downloadButton')) return;
    document.getElementById( event.target.id ).classList.add( "active" );
  }, false);
</script>