如何向覆盖 div“onclick”显示信息

Question

信息：我有一个表，存储了每个工人的以下信息（姓名，简短描述，人物形象，公司职位（如 CEO，项目经理，开发人员）社交网络链接：Github，Linkedin，Xing ，脸书）。

php：我有一个名为 wrapper 的 div 父级，在里面我有 2 个子 div（一个用于带有工人信息的表，第二个 div(class="info") 的想法是用信息覆盖表选定的工人。）

$query = new WP_Query( $args );
if ($query->have_posts()) :

    echo '<div class"wrapper"><div><table >';
    echo  '<tr>
    <th>NAME</th>
    <th>IMAGE</th>
    <th>POSITION</th>
    <th>MORE INFO</th>
  </tr>';
    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 '<tr class="ov-worker--table" ><td>'.$name.'</td><br/><td>'.$image.'</td><br/><td>'.$position.'</td><br/><td><button type="button"  onclick="populateOverlay('.$name.','.$description.','.$facebook.')">More Info!</button></td></tr>';
    endwhile;
    echo '</table>
    <div id="info"></div>
    </div></div>';


endif;
wp_reset_postdata();

scss:

.wrapper {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    //z-index: 2;
}
#info {
    display: none;
    position: absolute;
    width: 25%;
    height: 25%;
    top: 0;
    right: 0;
    font-size: 12px;
    color: rgb(128, 20, 20);
    background-color: rgba(119, 107, 107, 0.5);
}

js：

function populateOverlay(name, desc, social) {

    var overlay = document.getElementById("info");
  overlay.style.display = "block"; 
  overlay.innerHTML = "<div>"+name+"</div><div>"+desc+"</div><div>"+social+"</div>"; 

} 

function off() {
    var overlay= document.getElementById("info");
  overlay.style.display= "none";
} 

问题：单击时，我在我的 google chrome 控制台中收到以下错误（参数列表后未捕获 SyntaxError：缺少）。当我点击错误时，这就是它的来源

  </tr><tr class="ov-worker--table" ><td>LUKO</td><br/><td></td><br/><td>Cleaner</td><br/><td><button type="button"  onclick="populateOverlay(LUKO,he does notihng,NONE)">More Info!</button></td></tr><tr class="ov-worker--table" ><td>AMINE</td><br/><td>carlomagno.PNG</td><br/><td>CEO</td><br/><td><button type="button"  onclick="populateOverlay(AMINE,TRAVAJADOR,NONE)">More Info!</button></td></tr><tr class="ov-worker--table" ><td>Juan</td><br/><td>fotoperfil.jpg</td><br/><td>Cleaner</td><br/><td><button type="button"  onclick="populateOverlay(Juan,he does notihng,NONE)">More Info!</button></td></tr><tr class="ov-worker--table" ><td>ryan gold</td><br/><td></td><br/><td>PNP</td><br/><td><button type="button"  onclick="populateOverlay(ryan gold,another worker in the room,NONE)">More Info!</button></td></tr><tr class="ov-worker--table" ><td>Andrew</td><br/><td>IMG_20190909_171228.jpg</td><br/><td>CEO</td><br/><td><button type="button"  onclick="populateOverlay(Andrew,The hardest worker in the room,https://www.facebook.com/andrew.9?ref=bookmarks)">More Info!</button></td></tr></table>

最后，错误显示 populateOverlay 未定义，当我单击任何（更多信息按钮）时会出现此错误，如果当我单击按钮时，它会将每个工作人员的信息提交给按钮。可能是因为while循环？？。

Answer 1

我会先编写一个 JavaScript 函数来填充覆盖：

function populateOverlay(name, desc, social) {
    var overlay = document.getElementsByClassName("info");
    overlay.innerHTML = "<div>"+name+"</div><div>"+desc+"</div><div>"+social+"</div>";
}

然后我会更改按钮的 onclick 事件来触发这个新功能。所以从这里改变：

echo '<tr id="ov-worker--table" ><td>'.$name.'</td><br/><td>'.$image.'</td><br/><td>'.$position.'</td><br/><td><button type="button">More Info!</button></td></tr>';

到这样的事情：

echo '<tr class="ov-worker--table" ><td>'.$name.'</td><br/><td>'.$image.'</td><br/><td>'.$position.'</td><br/><td><button type="button" onclick=javascript:populateOverlay("'.$name.'","'.$description.'", "'.$facebook.'")>More Info!</button></td></tr>';

请注意，我已将 id="ov-worker--table" 更改为 class="ov-worker--table"，因为您应该只有您页面上任何 ID 的一个实例，而不是多个副本。

我刚刚在我的代码中选择了 Facebook 作为示例，但您也可以添加 LinkedIn、Github 和 Xing（也许先添加一些逻辑来检查它们是否已被填写）。