Значение в POPUP

@Seriiii · Регистрация: 21.12.2016

Студворк — интернет-сервис помощи студентам

Добрый вечер, начал изучать JS, хочу вместо того что-бы делать кучу попапов, сделать один и передавать в него значения нужных тегов (из аккордеона), ближайших к кнопке вызова POPUP'a.
Проблема: Сейчас в POPUP передается значение только самых первых (НЕ ближайших) значений тегов (

HTML5
1
<h2> <h3>

) Подскажите пожалуйста, как нужно изменить код, что-бы добавлялись ближайшее(верхнее) значение?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="big">
       <h2>Капоты</h2>
    <div class="opened-for-codepen kapot">
        <h3>BMW 5 (NF07), (F07), (F10N), (F11), (F18N)</h3>
            <p class="imageleft">
               КАКОЙ-ТО КОНТЕНТ
                   <a href="#x" class="block mybtn link" onclick="popup(1, this)" >Уточнить наличие и цену</a>
            </p>
                                
        <h3>BMW 5 линейка 1 (E60), (E60N), (E61), (E61N)</h3>
            <p class="imageleft">
                КАКОЙ-ТО КОНТЕНТ
                   <a href="#x" class="block mybtn link" onclick="popup(1, this)" >Уточнить наличие и цену</a>
            </p>
                                
        <h3>BMW 1 (E82), (E87N), (E88), (F20N), (F21N)</h3>
            <p class="imageleft">
               КАКОЙ-ТО КОНТЕНТ
              <a href="#x" class="block mybtn link" onclick="popup(1, this)" >Уточнить наличие и цену</a>
               </p>

JS POPUP

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
function popup(nm, e) {
    popupElm = document.getElementById("popup-bg");
    if (nm == -1) {
        popupElm.classList.remove('visible');
        document.querySelector('body').style.overflow = 'auto';
    } else {
        elm = popupElm.getElementsByClassName('popup');
        if (typeof nm != 'undefined')
            for (var i = elm.length - 1; i >= 0; i--) {
                if (elm[i].id === "popup" + nm) {
                    elm[i].classList.add('visible');
                    popupElm.classList.add('visible');
 
                    
 
 
                if (typeof nm != 'undefined' && typeof e != 'undefined'){
                    document.querySelector('#comment').value = e.parentNode.parentNode.querySelector('.opened-for-codepen h3').innerHTML;
                    document.querySelector('#add').value = e.parentNode.parentNode.parentNode.querySelector('.big h2').innerHTML;
                    }
 
 
 
                    document.querySelector('body').style.overflow = 'hidden';
                } else {
                    elm[i].classList.remove('visible');
                    document.querySelector('body').style.overflow = 'auto';
                }
            }
        else {
            popupElm.classList.add('visible');
            document.querySelector('body').style.overflow = 'hidden';
        }
    }
};

В середине кусок кода которым я пытаюсь это сделать.
HTML POPUP

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="popup-bg" id="popup-bg">
      <div class="popup" id="popup1">
        <div class="head">
          <div class="close" onclick="popup(-1)">&times;</div>
          <span>Заполните форму</span>
        </div>
        <div class="content">
          <p>и наш менеджер свяжется с Вами<br/>в ближайшее время</p>
          <form action="spasibo.php" method="post">
            <input type="text" required="" placeholder="Ваше имя" name="name">
            <input type="tel" required="" placeholder="Ваш телефон" name="tel">
            <div class="comment">   
                <input type="hidden" name="add" id="add">
             <input type="hidden" name="comment" id="comment">
            </div>
            <input type="submit" value="Отправить">
          </form>
        </div>  
      </div>
    </div>

P.S. Если поможет, сайт над которым работаю (в середине страницы каталог (аккордеон) ).http://s.lusti.net/_avto/

@sad67man · 31.01.2017, 12:35

Seriiii,

JavaScript
1
2
document.querySelector('#comment').value = e.parentNode.previousElementSibling.innerHTML;
document.querySelector('#add').value = e.parentNode.parentNode.previousElementSibling.innerHTML;

Добавлено через 1 минуту
Вообще у вас там jQuery подключен, я бы все через него делал.

@Seriiii · 31.01.2017, 12:40 **[ТС]**

sad67man, Можете подсказать, как? я только учусь, мучаюсь несколько дней и не врубаюсь

@sad67man · 31.01.2017, 12:48

Вот я накидал примерчик
https://jsfiddle.net/0wumu51b/1/

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<div class="big">
  <h2>Капоты</h2>
  <div class="opened-for-codepen kapot">
    <h3>BMW 5 (NF07), (F07), (F10N), (F11), (F18N)</h3>
    <p class="imageleft">
      КАКОЙ-ТО КОНТЕНТ
      <a href="#x" class="block mybtn link js-popup">Уточнить наличие и цену</a>
    </p>
    <h3>BMW 5 линейка 1 (E60), (E60N), (E61), (E61N)</h3>
    <p class="imageleft">
      КАКОЙ-ТО КОНТЕНТ
      <a href="#x" class="block mybtn link js-popup">Уточнить наличие и цену</a>
    </p>
    <h3>BMW 1 (E82), (E87N), (E88), (F20N), (F21N)</h3>
    <p class="imageleft">
      КАКОЙ-ТО КОНТЕНТ
      <a href="#x" class="block mybtn link js-popup">Уточнить наличие и цену</a>
    </p>
  </div>
</div>
 
<div class="big">
  <h2>Капоты2</h2>
  <div class="opened-for-codepen kapot">
    <h3>BMW 5 (NF07), (F07), (F10N), (F11), (F18N)</h3>
    <p class="imageleft">
      КАКОЙ-ТО КОНТЕНТ
      <a href="#x" class="block mybtn link js-popup">Уточнить наличие и цену</a>
    </p>
    <h3>BMW 5 линейка 1 (E60), (E60N), (E61), (E61N)</h3>
    <p class="imageleft">
      КАКОЙ-ТО КОНТЕНТ
      <a href="#x" class="block mybtn link js-popup">Уточнить наличие и цену</a>
    </p>
    <h3>BMW 1 (E82), (E87N), (E88), (F20N), (F21N)</h3>
    <p class="imageleft">
      КАКОЙ-ТО КОНТЕНТ
      <a href="#x" class="block mybtn link js-popup">Уточнить наличие и цену</a>
    </p>
  </div>
</div>
 
<div class="popup-bg" id="popup-bg">
  <div class="popup visible" id="popup1">
    <div class="head">
      <div class="close">×</div>
      <span>Заполните форму</span>
    </div>
    <div class="content">
      <p>и наш менеджер свяжется с Вами
        <br>в ближайшее время</p>
      <form action="spasibo.php" method="post">
        <input type="text" name="add" id="add" value="">
        <input type="text" name="comment" id="comment" value="">
        <hr>
        <input type="text" required="" placeholder="Ваше имя" name="name">
        <input type="tel" required="" placeholder="Ваш телефон" name="tel">
 
        <input type="submit" value="Отправить">
      </form>
    </div>
  </div>
 
 
</div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(document).ready(function() {
  //popup
  $('.popup').on('click', function(e) {
    e.stopPropagation();
  });
 
  $('.popup .close, #popup-bg').on('click', function() {
    $('#popup-bg, #popup-bg .popup').removeClass('visible');
    $('#comment, #add').val('');
  });
 
  $('.js-popup').on('click', function() {
    var $this = $(this);  
    var sectionName = $this.closest('.opened-for-codepen').prev('h2').text();
    var title = $this.parent().prev('h3').text();
    $('#add').val(sectionName);
    $('#comment').val(title);
    $('#popup-bg, #popup1').addClass('visible');
  });
})

Новые блоги и статьи Все статьи Все блоги /
Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .

@Seriiii 0 / 0 / 0 Регистрация: 21.12.2016 Сообщений: 29
	31.01.2017, 12:40 [ТС]
	sad67man, Можете подсказать, как? я только учусь, мучаюсь несколько дней и не врубаюсь 0

Значение в POPUP

Решение