Как передать значение каждой переменной выводящийся в цикле php в javascript?

Question

[Алексей Чумаченко]

Добрый день. подскажите пожалуйста как передать значение переменной выводящийся в цикле пхп в яваскрипт. Нужно что бы в переменной яваскрипт было значение не последнего значения а то которое соответствует итерации цикла.

<?php if( have_rows('lp_phone', 'option') ): ?>
            <?php while( have_rows('lp_phone', 'option') ): the_row(); 

             $number = get_sub_field('lp_number', 'option');
             $icon = get_sub_field('number_icon', 'option');
             $numberShow = get_sub_field('id_show', 'option');
             ?>

             <div class="contacts-number">
                 <span class="contacts-number-icon"><?= $icon; ?></span>
                 <a href='javascript:;' onclick=showTooltip() id="link"> +38xxx-xxx-xx-xx </a>
                 <div id=<?= $numberShow; ?> style='display: none'><?= $number; ?></div>
             </div>
                  <?php endwhile; ?>
                  <?php endif; ?>

function showTooltip()
   {
           var myDiv = document.getElementById('<?= $numberShow; ?>');
           var myLink = document.getElementById('link');
           
           console.log(myDiv);

  if(myDiv.style.display == 'none')
        {
           myDiv.style.display = 'block';
           myLink.style.display = 'none';
} 

else {
           myDiv.style.display = 'none';
}
return false;

То есть сейчас в переменной myDiv значение послденей итерации цикла пхп. Нужно что бы по нажатия на ссылку открывался конкретный номер телефона а не последнее значение.

Answer 1

[0xD34F]

Значения атрибутов id должны быть уникальны, а не как у вас - одинаковое у нескольких элементов. Так что первое, что надо сделать - вырезать id="link".

При использовании инлайновых (встроенных) обработчиков событий ссылка на элемент доступна посредством ключевого слова this; а вместо того, чтобы выдумывать какие-то стрёмные id для блоков которые надо показать, поднимайтесь при клике до общего предка блока и кликнутого элемента, и ищите блок через querySelector:

onclick="showTooltip(this)"

function showTooltip(link) {
  const div = link.parentNode.querySelector('div');

  if (div.style.display === 'none') {
    div.style.display = 'block';
    link.style.display = 'none';
  } else {
    div.style.display = 'none';
  }
}

Но вообще - к чёрту onclick, вырежьте его и назначайте обработчики по-человечески:

document.querySelectorAll('.contacts-number a').forEach(n => {
  n.addEventListener('click', onClick);
});

function onClick() {
  const div = this.closest('.contacts-number').querySelector('div');

  if (div.style.display === 'none') {
    div.style.display = 'block';
    this.style.display = 'none';
  } else {
    div.style.display = 'none';
  }
}

Comments

[Алексей Чумаченко]

Огромное Вам спасибо. нереально помогли.