我如何将数据从 php 获取到 js

Question

所以我有一些定义工人的自定义属性，想法是呼应名称图像和位置属性，我已经做到了。现在点击我想显示一个小的覆盖层，显示名称描述和 4 个社交链接. 这就是我的 php 代码的样子：$query = new WP_Query( $args );if ($query->have_posts()) :    echo '<div class="ov-worker--wrapper"><div class="ov-worker--modal"><ul>';    while ($query->have_posts()) : $query->the_post();    $name = get_post_meta( get_the_ID(), '_overview_worker_key', true )['name'] ?? '';    $image = get_post_meta( get_the_ID(), '_overview_worker_key', true )['image'] ?? '';    $position = get_post_meta( get_the_ID(), '_overview_worker_key', true )['position'] ?? '';    $description = get_post_meta( get_the_ID(), '_overview_worker_key', true )['description'] ?? '';    $Linkedin = get_post_meta( get_the_ID(), '_overview_worker_key', true )['Linkedin'] ?? '';    $github = get_post_meta( get_the_ID(), '_overview_worker_key', true )['github'] ?? '';    $xing = get_post_meta( get_the_ID(), '_overview_worker_key', true )['xing'] ?? '';    $facebook = get_post_meta( get_the_ID(), '_overview_worker_key', true )['facebook'] ?? '';        echo '<li class="ov-worker--view__all"><strong> Name: </strong>'.$name.'<br/><strong> Image: </strong>'.$image.'<br/><strong> Position: </strong>'.$position.'</li>';    endwhile;    echo '</ul></div></div>';endif;wp_reset_postdata();我的问题：我无法直接在我的 js 文件中选择 $name、$description 和 4 个社交链接。我不太清楚如何在 scss 上构建叠加层，但我确实迷上了在 div 上激活 Eventlistiner 以显示我想要的信息。

Answer 1

我已经编辑了您的代码：一种简单的方法是在隐藏输入中设置您想要的值，然后使用 js 获取它们：

我已经为 $name 做了那个例子：

$query = new WP_Query( $args );

if ($query->have_posts()) :

echo '<div class="ov-worker--wrapper"><div class="ov-worker--modal"><ul>';

while ($query->have_posts()) : $query->the_post();

    $name = get_post_meta( get_the_ID(), '_overview_worker_key', true )['name'] ?? '';

    $image = get_post_meta( get_the_ID(), '_overview_worker_key', true )['image'] ?? '';

    $position = get_post_meta( get_the_ID(), '_overview_worker_key', true )['position'] ?? '';

    $description = get_post_meta( get_the_ID(), '_overview_worker_key', true )['description'] ?? '';

    $Linkedin = get_post_meta( get_the_ID(), '_overview_worker_key', true )['Linkedin'] ?? '';

    $github = get_post_meta( get_the_ID(), '_overview_worker_key', true )['github'] ?? '';

    $xing = get_post_meta( get_the_ID(), '_overview_worker_key', true )['xing'] ?? '';

    $facebook = get_post_meta( get_the_ID(), '_overview_worker_key', true )['facebook'] ?? '';

    echo '<li class="ov-worker--view__all"><strong> Name: </strong>'.$name.'<br/><strong> Image: </strong>'.$image.'<br/><strong> Position: </strong>'.$position.'</li>';

endwhile;

echo '</ul></div></div>';

echo '<input type="hidden" id="nameInput" value="'.$name.'">';

echo '<input type="hidden" id="descInput" value="'.$description.'">';

endif;

wp_reset_postdata();

然后在您的 js 代码中，您可以访问该值，如下例所示：

 var name = document.getElementById('nameInput').value;