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

Question

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

php：我有一个名为 wrapper 的 div 父级，在里面我有 2child 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);

}

Answer 1

我会首先编写一个 JavaScript 函数来填充叠加层：function populateOverlay(name, desc, social) {&nbsp; &nbsp; var overlay = document.getElementsByClassName("info");&nbsp; &nbsp; 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（也许先添加一些逻辑来检查它们是否已被填写）。