Итак, у меня есть некоторые пользовательские атрибуты, которые определяют работника, идея состоит в том, чтобы повторить имя изображения и атрибут позиции, и я уже сделал это. Теперь при нажатии я хочу отобразить небольшое наложение, которое показывает описание имени и 4 социальные ссылки , Вот как выглядит мой PHP-код:

$query = new WP_Query( $args ); if ($query-{amp}gt;have_posts()) : echo '{amp}lt;div class="ov-worker--wrapper"{amp}gt;{amp}lt;div class="ov-worker--modal"{amp}gt;{amp}lt;ul{amp}gt;'; while ($query-{amp}gt;have_posts()) : $query-{amp}gt;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 '{amp}lt;li class="ov-worker--view__all"{amp}gt;{amp}lt;strong{amp}gt; Name: {amp}lt;/strong{amp}gt;'.$name.'{amp}lt;br/{amp}gt;{amp}lt;strong{amp}gt; Image: {amp}lt;/strong{amp}gt;'.$image.'{amp}lt;br/{amp}gt;{amp}lt;strong{amp}gt; Position: {amp}lt;/strong{amp}gt;'.$position.'{amp}lt;/li{amp}gt;'; endwhile; echo '{amp}lt;/ul{amp}gt;{amp}lt;/div{amp}gt;{amp}lt;/div{amp}gt;'; endif; wp_reset_postdata(); 

МОЯ ПРОБЛЕМА: я не могу выбрать $ name, $ description и 4 социальные ссылки прямо в моем js-файле. У меня есть не очень четкое представление о том, как создать оверлей на scss, но я определенно подсел на активацию Eventlistiner на div, чтобы показать информацию, которую я хочу.

Я отредактировал ваш код: простой способ — установить нужные значения в скрытых входах, а затем получить их с помощью js:

Я сделал этот пример для $ name:

 $query = new WP_Query( $args ); if ($query-{amp}gt;have_posts()) : echo '{amp}lt;div class="ov-worker--wrapper"{amp}gt;{amp}lt;div class="ov-worker--modal"{amp}gt;{amp}lt;ul{amp}gt;'; while ($query-{amp}gt;have_posts()) : $query-{amp}gt;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 '{amp}lt;li class="ov-worker--view__all"{amp}gt;{amp}lt;strong{amp}gt; Name: {amp}lt;/strong{amp}gt;'.$name.'{amp}lt;br/{amp}gt;{amp}lt;strong{amp}gt; Image: {amp}lt;/strong{amp}gt;'.$image.'{amp}lt;br/{amp}gt;{amp}lt;strong{amp}gt; Position: {amp}lt;/strong{amp}gt;'.$position.'{amp}lt;/li{amp}gt;'; endwhile; echo '{amp}lt;/ul{amp}gt;{amp}lt;/div{amp}gt;{amp}lt;/div{amp}gt;'; echo '{amp}lt;input type="hidden" id="nameInput" value="'.$name.'"{amp}gt;'; echo '{amp}lt;input type="hidden" id="descInput" value="'.$description.'"{amp}gt;'; endif; wp_reset_postdata(); 

тогда в вашем js-коде вы можете получить доступ к этому значению, как показано ниже:

  var name = document.getElementById('nameInput').value; 
Nortix Agency

новый участник этого сайта. Будьте внимательны, спрашивая разъяснения, комментируя и отвечая. Проверьте наш

Кодекс поведения

,