Wordpress: получить идентификатор из поста wp_query для jquery

Question

У меня есть код:

<div id="parent-<?php the_ID(); ?>" class="first">

, и я хочу использовать его в JQuery для функции щелчка, например:

$('#parent-**??**').click(function (){

Как мне поступить?

Answer 1

<div id="parent-<?php the_ID(); ?>" class="first parent" data-id="<?php the_ID(); ?>">
<script>
    $('.parent').click(function (){
         var parentId = $(this).attr('data-id');
        if (parentId != undefined && parentId != '') {
            // do something
        }

     });
</script>

Answer 2

Трудно получить динамически генерируемые атрибуты DOM.jQuery, хотя он может получить значение с помощью AJAX, это немного трудоемко для этого.Лучшая вещь IMO - просто назначить идентификатор скрытому элементу с универсальным классом.В вашем jQuery вы можете использовать универсальный класс для получения динамического значения и добавить его в селектор jQuery для получения динамического элемента.

Если вы можете изменить HTML, вы можете сделать это:

<div id="hidden-parent" data-id="<?php the_ID(); ?>"></div>

<div id="parent-<?php the_ID(); ?>" class="first">
    <!-- etc. -->
</div>

Тогда в вашем jQuery:

let id = $('#hidden-parent').attr('data-id'),
    parentDiv = $('#parent-'+ id);

parentDiv.click(function()
{
    //whatever
})

здесь мы просто получаем значение data-id и используем его для получения родительского элемента - * div

Следует отметить одну вещьоб этом.Если вы зацикливаете div для создания страницы, то использование идентификатора для элемента hidden-parent не сработает.Что вы можете сделать, это добавить ключ, например,

<?php foreach ($elements as $key => $el) : ?>
    <div id="foo-<?php echo $key; ?>">
        <!-- etc. -->
    </div>
<?php endforeach; ?>

Тогда в вашем jQuery просто используйте $('#foo-1') и т. Д.

Answer 3

Попробуйте передать значение из PHP в JS:

PHP:

echo sprintf("<script> var theID = %d;</script>", the_ID());
<div id="parent-<?php the_ID(); ?>" class="first">

JS:

 <script>
   alert("current post id = "+theID);
 </script>

ОБНОВЛЕНИЕ:

В случаеВы печатаете сообщения в цикле, вы можете поместить все идентификаторы в массив.

PHP:

<?php
$posts = [];
if ( have_posts() ) {
    while ( have_posts() ) {
        the_post(); 
        ?>
        <div id="parent-<?php the_ID(); ?>" class="first">
        //
        // Post Content here
        //
        </div>
        <?php
        posts[] = get_the_ID();
    } 
}

echo sprintf("<script> var thePostIDs = %s;</script>", json_encode(posts));

JS:

<script>
    thePostIDs.map(function(id){
     // do something with the id
     $('#parent-'+id).click(function (){
       // do something
     });
    });
</script>