将acf字段变量添加到jquery答案

【问题标题】：Add acf field variable to jquery将acf字段变量添加到jquery
【发布时间】：2018-08-07 12:50:17
【问题描述】：

我在高级自定义字段中创建了字段：

<div class="field_class">
  <?php if( get_field('field') ): ?>
     <h4><?php the_field('field'); ?></h4>
  <?php endif; ?>
</div>

我想在 jquery 中添加 acf 字段：

jQuery(document).ready(function($){
$('.content-wrapper').addClass('field_class');

});

我知道我必须向 jquery 添加变量，例如：

var field = "<?php the_field('field'); ?>" ;

但不知道如何将此变量添加到 addClass：addClass('field_class') 以获取所有内容（类和变量）。

感谢您的帮助，

【问题讨论】：

标签： php jquery wordpress

【解决方案1】：

首先您需要将字段值存储在 PHP 变量中

<?php 
   $fieldvar = get_field('field_name');
?>

然后将此变量添加为 jQuery 类

jQuery(document).ready(function($){
    $('.content-wrapper').addClass('<?php echo $fieldvar; ?>');
});

【讨论】：

如果我添加 $fieldvar = get_field('field_name');我得到的子函数：
我不清楚你到底需要什么，请解释一下。
我想在 jquery 的内容中添加 acf 字段（使用 acf 字段抓取类），因为我没有弄清楚如何从这个问题中插入 acf 字段以打印格式：stackoverflow.com/questions/51596867/…跨度>

【解决方案2】：

jQuery(document).ready(function($){
    $('.content-wrapper').addClass(field);
});

【讨论】：

【解决方案3】：

你做对了，但是当你试图直接在你的脚本中添加值时尝试添加 echo：

var field = "<?php echo the_field('field'); ?>" ;

或者试试

var field = "<?php echo get_field('field'); ?>" ;

the_field() 的工作方式与 echo get_field 类似，但您可以尝试一下。

【讨论】：

您好，我尝试将code$field = "" ;code 添加到子函数和我想要的模板中显示字段，我收到未定义变量的错误。我现在尝试将此字段添加为追加到 jscodejQuery(document).ready(function($){ $('.class_before').append(field); });code。输入文件在管理员和帖子中工作，但可以在我想显示字段的模板上显示。
您正在尝试使用 PHP 添加 javascript，但这是行不通的，因为 javascript 在前端 DOM 编译，而 PHP 代码在服务器端执行。
谢谢，但不明白，php 变量是在单独的 - php 模板中声明的。我错过了什么？

【解决方案4】：

这似乎没有一个正确的答案，一个解决方案。

所以这里有一个适合你的解决方法。

创建 ACF 字段。
存储值

【讨论】：

【解决方案5】：

我知道这个问题很老，但这是答案。创建自定义字段<?php the_field( 'primary_title', 'option' ); ?> 然后你需要本地化 js 文件。例如js-localize.js

wp_enqueue_script( 'js-localize', get_template_directory_uri() . '/js/js-localize.js', array ( 'jquery' ), NULL, true);
wp_localize_script( 'js-localize', 'fieldsJS',
    array(
        'title' => get_field('primary_title', 'option'),
        )
);

并在js-localize.js 文件中创建一个变量

let titleJs = fieldsJS.title;

您可以使用控制台轻松测试

console.log(titleJs);

【讨论】：