Как обратиться к нескольким 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

[0xD34F]

О каких элементах идёт речь, где они находятся, по какому событию значение какого атрибута надо получать:

const containerSelector = 'div';
const eventType = 'change';
const triggerSelector = '.check:checked';
const itemSelector = 'img';
const attrName = 'src';

Поднимаемся от чекбокса, на котором случилось событие, до общего предка чекбокса и картинки, ищем картинку, достаём атрибут:

$('body').on(eventType, triggerSelector, function() {
  const value = $(this)
    .closest(containerSelector)
    .find(itemSelector)
    .attr(attrName);
});

или

document.body.addEventListener(eventType, ({ target: t }) => {
  if (t.matches(triggerSelector)) {
    const value = t
      .closest(containerSelector)
      .querySelector(itemSelector)
      .getAttribute(attrName);
  }
});

Comments

[Genri_Rus]

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

Answer 2

[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 3

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

Добавьте картинке 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]

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