我如何将数据从 php 获取到 js [重复]答案

【问题标题】：how can i take data from php to js [duplicate]我如何将数据从 php 获取到 js [重复]
【发布时间】：2020-04-07 09:49:47
【问题描述】：

所以我有一些定义工人的自定义属性，想法是呼应名称图像和位置属性，我已经做到了。现在点击我想显示一个小的覆盖，显示名称描述和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 以显示我想要的信息。

【问题讨论】：

欢迎来到 SO！您的问题写得很好，但是这里有很多重复的问题，请在发布新问题之前尝试搜索。

标签： javascript php wordpress sass

【解决方案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;

【讨论】：