Как обратиться к нескольким img через this?

Question

[Genri_Rus]

Имеется такая структура кода:

<div>
  <p><input class="check" id="check-option-1" name="name" type="checkbox">
  <label for="check-option-1"></label>
  </p>
  <img src="http://lorempixel.com/30/30/city">
  <p class="copy">1</p>
  <p class="copy-2">1.1</p>
</div>
<div>
  <p><input class="check" id="check-option-2" name="name" type="checkbox">
  <label for="check-option-2"></label>
  </p>
  <img src="http://lorempixel.com/30/30/technics">
  <p class="copy">2</p>
  <p class="copy-2">2.1</p>
</div>

$('body').on('change', '.check', function(){
    
    if ($(this).prop('checked')) {
        let img = $('img').attr('src');
}
});

Мне нужно при нажатии на галочку записывать src картинки.

let img = $('img').attr('src') - вот так у меня выбирается только одна картинка.

А вот как сделать так, чтобы при выборе чекбокса выбиралась только та картинка, на которую я нажимал?

Answer 1

[iBird Rose]

let img = $(this).parent().siblings('img').attr('src');

Comments

[Genri_Rus]

Спасибо за помощь!

[Genri_Rus]

А как тогда в таком случае обратиться ?

<div>
  <p><input class="check" id="check-option-1" name="name" type="checkbox">
  <label for="check-option-1"></label>
  </p>
  <a href="http://lorempixel.com/30/30/city"><img src="http://lorempixel.com/30/30/city"></a>
  <p class="copy">1</p>
  <p class="copy-2">1.1</p>
</div>

[Genri_Rus]

А почему в данном варианте работает, который выше:

let img = $(this).parent().next().children('img').attr('src');

А вот в таком варианте не работает ?

let img = $(this).parent().next().siblings('img').attr('src');

[iBird Rose]

Genri_Rus, смотри документацию. children - это дочерние элементы, siblings - это рядом стоящие (на одном и том же уровне вложенности)

[Genri_Rus]

iBird Rose, спасибо за ответ

Т.е. такой вариант будет правильным в данном примере ?

let img = $(this).parent().next().children('img').attr('src');

Answer 2

[Алексей Скляров]

Добавьте картинке data-атрибут со значением ID инпута, который за ней закреплен:

<img src="http://lorempixel.com/30/30/city" data-input="check-option-1">

Далее получайте ID чекнутого инпута

$('body').on('change', '.check', function(){
    let id = $(this).attr('id');
    if ($(this).prop('checked')) {
        let img = $('img[data-id="'+id+'"]').attr('src');
}
});

В коде могут быть ошибки, работоспособность не проверял.

UPD: добавил песочницу https://jsfiddle.net/qf8zgshw/

Comments

[Genri_Rus]

Спасибо за помощь!