Wordpress - 如何在Javascript变量中获取Post_ID（）和echo？

Question

So I basically want to do something unique for every loop. In my loop, I have a button that links to each post. But I also have an onClick event on the button that appends another class.

So basically, if I click a button, it adds a class that turns the button red. Also, I had to put the <script> tag in the loop because otherwise, all buttons on the page turn red since the page displays around 5 loops (posts).

So I'm trying to target just one loop's button. (I hope that makes sense).

So here's an example:

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


...
?>

What I want is to target each loop's button using the the_ID() and the static class.

Example:

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

But that doesn't work, I guess because you can't echo php inside javascript?

Also, is there a way to not put the javascript inside the loop, yet still target each loop's button based on the_iD()? I would hate to have to put the javascript for every loop just to target the button for each loop.

Can anyone help?

Answer 1

try

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

move out from loop:

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