0

Есть следующая конструкция: Необходимо при клике по ссылке в определенном блоке, добавить заголовок h1 в input поле #field1, а из блока с классом .product значение с классом .title в input поле #field2

Приведенный в конструкции/примере скрипт срабатывает, но проблема в том, что он обрабатывает все блоки с определенным классом и добавляет значения всех .title в поле #field2, а надо только значение того .title который находится в блоке где был клик по ссылке.

Сделать для каждого блока уникальный индификатор нет возможности (блоков может быть несколько десятков на странице). Помогите пожалуйста решить данную задачу.

$('.wrapper a.link').on('click', function() {
  $('input#field1').val($('.wrapper h1').text());
  $('input#field2').val($('.product .title').text());
});
h1 {
  margin: 5px;
  font-size: 16px;
}

.product {
  padding: 20px;
  display: inline-block;
  background: #f5f5f5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="wrapper">
  <h1>Главный заголовок</h1>
  <div class="product">
    <div class="title">Заголовок 1</div>
    <a class="link" href="#">Ссылка</a>
  </div>
  <div class="product">
    <div class="title">Заголовок 2</div>
    <a class="link" href="#">Ссылка</a>
  </div>
  <div class="product">
    <div class="title">Заголовок 3</div>
    <a class="link" href="#">Ссылка</a>
  </div>

  <p>Первое поле <input id="field1" type="text" /></p>
  <p>Второе поле <input id="field2" type="text" /></p>
</div>

2 ответа 2

2
$('.wrapper a.link').on('click', function() {
var vtitle = $('.wrapper h1').text();
var vlink = $(this).closest('.product').find('.title').text();

  $('input#field1').val(vtitle);
  $('input#field2').val(vlink);

});
1
  • Большое спасибо! Рабочее решение! Структура в проекте сложная (в примере максимально упростил), и вариант с поиском дочернего блока внутри родительского это 100% подходящий мне вариант. Работает как и требовалось. Спасибо!
    – Slava
    7 апр 2019 в 21:30
2

$('.wrapper a.link').on('click', function() {
  $("#field1").val($(this).closest(".wrapper").find("h1").text());
  $("#field2").val($(this).siblings(".title").text());
});
h1 {
  margin: 5px;
  font-size: 16px;
}

.product {
  padding: 20px;
  display: inline-block;
  background: #f5f5f5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <h1>Главный заголовок</h1>
  <div class="product">
    <div class="title">Заголовок 1</div>
    <a class="link" href="#">Ссылка</a>
  </div>
  <div class="product">
    <div class="title">Заголовок 2</div>
    <a class="link" href="#">Ссылка</a>
  </div>
  <div class="product">
    <div class="title">Заголовок 3</div>
    <a class="link" href="#">Ссылка</a>
  </div>

  <p>Первое поле <input id="field1" type="text" /></p>
  <p>Второе поле <input id="field2" type="text" /></p>
</div>

Ваш ответ

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

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