Question

我有一个验证码：

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

，我想在JQuery中使用它来实现点击功能，例如：

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

我应该如何进行？

Answer 1

尝试将值从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>

更新：

如果要循环打印帖子，则可能需要将所有id推送到数组中。

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>

Answer 2

很难获得动态生成的DOM属性。 jQuery，虽然可以使用AJAX获取值，但这样做会有些麻烦。 IMO最好的办法就是简单地将ID分配给具有通用类的隐藏元素。然后，您可以在jQuery中使用泛型类获取动态值，并将其附加到jQuery选择器中以获取动态元素。

如果您可以更改HTML，则可以执行以下操作：

select 'whatever' from dual;
 ?column?
-----------
 whatever

然后在您的jQuery中

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

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

在这里，我们只获取let id = $('#hidden-parent').attr('data-id'), parentDiv = $('#parent-'+ id); parentDiv.click(function() { //whatever })值，并使用它来获取父级* div

有一点要注意。如果要循环div来构建页面，则在hidden-parent元素上使用ID无效。您可以做的就是附加密钥，例如

data-id

然后在jQuery中仅使用<?php foreach ($elements as $key => $el) : ?> <div id="foo-<?php echo $key; ?>">  </div> <?php endforeach; ?>等。

Answer 3

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

WordPress：从wp_query帖子获取jquery的ID

3 个答案: