Как при клике добавить значение в input только из родительского блока где находится ссылка

140

16 января 2020, 03:10

Есть следующая конструкция: Необходимо при клике по ссылке в определенном блоке, добавить заголовок 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>

Answer 1

$('.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);
});

Answer 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>