jQuery 动态 id 值在 WordPress 中返回 UNDEFINED答案

【问题标题】：jQuery dynamic id value returning UNDEFINED in WordPressjQuery 动态 id 值在 WordPress 中返回 UNDEFINED
【发布时间】：2017-03-24 04:31:42
【问题描述】：

我正在尝试将 WordPress Post Id 动态作为 jQuery 中的变量。但是，当我尝试在console 中调试时，它返回的值未定义。谁能帮我解决这个问题？

代码如下：

data-id属性显示当前帖子的id

<?php $id = get_the_id(); ?>

 <button data-id="<?php echo $id; ?>" type="button" class="book btn btn-danger">
    Submit
</button>

我的 jQuery

jQuery(document).ready(function(jQuery){
jQuery('.packageForm').submit(packageSubmit);     
        function packageSubmit(){
           var id = jQuery(this).attr('data-id');
           var ceccForm = jQuery(this).serialize();
            jQuery.ajax({
            type:"POST",
            url: "wp-admin/admin-ajax.php",
            data: ceccForm,
            success:function(data){
            console.log(id);
            console.log(data);
            jQuery(".response").html(data);
            jQuery(".packageForm")[0].reset();
            jQuery('body').removeClass('modal-open');
            }
        });

      return false;
      }
 });

这里，我使用var id = jQuery(this).attr('data-id');动态获取属性data-id的值。它在浏览控制台中显示消息 Undefined Value。

有什么帮助吗？

【问题讨论】：

控制台日志jQuery(this) 在您的提交处理程序中，您将看到原因
实际上.packageForm 是我的Form CLass <form method="post" class="packageForm clearfix">。我不认为这与此无关。还是有？
没错，所以jQuery(this) 是您的表单元素，而不是您的具有数据属性的按钮元素

标签： javascript php jquery ajax wordpress

【解决方案1】：

这里this实际上是指您的表单packageForm，因为您是从表单的提交函数中调用它，并且它不会具有您为按钮设置的属性。

你可能会做这样的事情

var id = jQuery(this).find('button.book').data('id');

【讨论】：

你好@H77，id 只显示循环的第一个元素。我也在使用其他按钮，它们都有不同的值，但日志显示相同的 id，即 49
你想得到所有的ID吗？您可以发布一个生成的 html 的示例吗？
himalayanbodycare.com，你可以在这里看到。转到我们的套餐部分并尝试预订套餐。第一个包工作正常，但其他包没有重置表单值。那是我的问题.. :)
更新了答案。根据网站，这应该可以工作。

【解决方案2】：

这是指表单而不是按钮

如果按钮在表单标签中，则执行find 以获取按钮

jQuery(this).find('button.book').attr('data-id');

【讨论】：