信息：我有一個表，其中存儲了每個工人的以下信息（姓名、簡短描述、人物形象、公司中的職位（如 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);}
1 回答
catspeake
TA貢獻1111條經驗 獲得超0個贊
我會首先編寫一個 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（也許先添加一些邏輯來檢查它們是否已被填寫）。
- 1 回答
- 0 關注
- 135 瀏覽
添加回答
舉報
0/150
提交
取消