如何向覆盖 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) {

    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（也许先添加一些逻辑来检查它们是否已被填写）。