0

Есть 4 div с кнопками. По клику на кнопку открывается модальное окно, которое должно брать заголовок и картинку из div'a. Как осуществить такую магию?

$('.izdat_button').on('click', function() {
  var value = $('.izdat p').html();
  var imgMe = $('.izdat img').attr('src');

  $('.time_to_change').html(value);
  $('.img_izdat img').attr('src', imgMe);

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="izdat">
  <img src="img/1.png" alt="">
  <p>Инструкция<br><strong>"1"</strong></p>
  <button class="izdat_button" type="submit">Подробнее</button>
</div>
<div class="izdat">
  <img src="img/2.png" alt="">
  <p>Инструкция<br><strong>"2"</strong></p>
  <button class="izdat_button" type="submit">Подробнее</button>
</div>
<div class="izdat">
  <img src="img/3.png" alt="">
  <p>Инструкция<br><strong>"3"</strong></p>
  <button class="izdat_button" type="submit">Подробнее</button>
</div>
<div class="izdat">
  <img src="img/4.png" alt="">
  <p>Инструкция<br><strong>"4"</strong></p>
  <button class="izdat_button" type="submit">Подробнее</button>
</div>



<div style="display: none;">
  <div class="box-modal" id="instructions_form">
    <div class="wrap_form">
      <p class="time_to_change">Инструкция<br><strong>1</strong></p>
      <div class="img_izdat">
        <img src="img/1.png" alt="">
      </div>
    </div>
    <div class="clearfix"></div>
  </div>
</div>

2 ответа 2

1

Используйте .siblings(), для того чтобы найти соседние элементы с той кнопкой, на которую нажали.

Сейчас же в вашем коде нет уточнения, и возвращается первый найденный .izdat p и .izdat img

$('.izdat_button').on('click', function(e) {
  var value = $(this).siblings('.izdat p').html();
  var imgMe = $(this).siblings('.izdat img').attr('src');
  console.log(value);
  $('.time_to_change').html(value);
  $('.img_izdat img').attr('src', imgMe);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="izdat">
  <img src="img/1.png" alt="">
  <p>Инструкция1<br><strong>"1"</strong></p>
  <button class="izdat_button" type="submit">Подробнее</button>
</div>
<div class="izdat">
  <img src="img/2.png" alt="">
  <p>Инструкция2<br><strong>"2"</strong></p>
  <button class="izdat_button" type="submit">Подробнее</button>
</div>

<hr> modal:
<div>
  <div class="box-modal" id="instructions_form">
    <div class="wrap_form">
      <p class="time_to_change">Инструкция<br><strong>1</strong></p>
      <div class="img_izdat">
        <img src="img/1.png" alt="">
      </div>
    </div>
    <div class="clearfix"></div>
  </div>
</div>

1

Чтобы "взять" необходимые html и img в блоке, в котором была нажата кнопка, для начала можно определить этот самый блок, используя, например, метод .closest(), а уже в нем искать необходимый вам элементы:

$('.izdat_button').on('click', function() {
  var izdat = $(this).closest('.izdat'); // блок .izdat, в котором нажата кнопка
  var value = izdat.find('p').html();
  var imgMe = izdat.find('img').attr('src');

  $('.time_to_change').html(value);
  $('.img_izdat img').attr('src', imgMe);

  console.log('HTML: ' + value + ', SRC: ' + imgMe); // для демонстрации
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="izdat">
  <img src="img/1.png" alt="">
  <p>Инструкция<br><strong>"1"</strong></p>
  <button class="izdat_button" type="submit">Подробнее</button>
</div>
<div class="izdat">
  <img src="img/2.png" alt="">
  <p>Инструкция<br><strong>"2"</strong></p>
  <button class="izdat_button" type="submit">Подробнее</button>
</div>
<div class="izdat">
  <img src="img/3.png" alt="">
  <p>Инструкция<br><strong>"3"</strong></p>
  <button class="izdat_button" type="submit">Подробнее</button>
</div>
<div class="izdat">
  <img src="img/4.png" alt="">
  <p>Инструкция<br><strong>"4"</strong></p>
  <button class="izdat_button" type="submit">Подробнее</button>
</div>


<div class="box-modal" id="instructions_form">
  <div class="wrap_form">
    <p class="time_to_change">Инструкция<br><strong>1</strong></p>
    <div class="img_izdat">
      <img src="img/1.png" alt="">
    </div>
  </div>
  <div class="clearfix"></div>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.