我如何将数据从 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();&nbsp; &nbsp; $name = get_post_meta( get_the_ID(), '_overview_worker_key', true )['name'] ?? '';&nbsp; &nbsp; $image = get_post_meta( get_the_ID(), '_overview_worker_key', true )['image'] ?? '';&nbsp; &nbsp; $position = get_post_meta( get_the_ID(), '_overview_worker_key', true )['position'] ?? '';&nbsp; &nbsp; $description = get_post_meta( get_the_ID(), '_overview_worker_key', true )['description'] ?? '';&nbsp; &nbsp; $Linkedin = get_post_meta( get_the_ID(), '_overview_worker_key', true )['Linkedin'] ?? '';&nbsp; &nbsp; $github = get_post_meta( get_the_ID(), '_overview_worker_key', true )['github'] ?? '';&nbsp; &nbsp; $xing = get_post_meta( get_the_ID(), '_overview_worker_key', true )['xing'] ?? '';&nbsp; &nbsp; $facebook = get_post_meta( get_the_ID(), '_overview_worker_key', true )['facebook'] ?? '';&nbsp; &nbsp; 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 代码中，您可以访问该值，如下例所示：&nbsp;var name = document.getElementById('nameInput').value;