Как поправить js код?

Question

[Антон]

Так js работает, кликая на иконки - переключаются фотки

<div class="gallery-colors-active">
<label class="photocheck" for="001"><input class="gl" id="001" name="bmw" type="radio"/></label>
<label class="photocheck" for="002"><input class="gl" id="002" name="bmw" type="radio"/></label>
<label class="photocheck" for="003"><input class="gl" id="003" name="bmw" type="radio"/></label>
<label class="photocheck" for="004"><input class="gl" id="004" name="bmw" type="radio"/></label>
</div>

<div class="gallery-wrapper">
<div class="gallery_box">
<img class="gallery-image" src="/upload/iblock/157/DSC07320_1.jpg">
<img class="gallery-image" src="/upload/iblock/620/DSC07321_1.jpg">
<img class="gallery-image" src="/upload/iblock/4c6/DSC07322_1.jpg">
<img class="gallery-image" src="/upload/iblock/d30/DSC07323_1.jpg">
</div>
</div>

$(document).on('change', '.gallery-colors-active', function() {
  const
    $this = $(this),
    index = $this.find('input:checked').parent().index();
$('.gallery_box').find('img').hide().eq(index).show();
});
$('.gallery-colors-active').find('[type="radio"]:first').click();

Но внес изменения, перед label - вставляю div и уже код js не работает:

<div class="gallery-colors-active">
<div class="photocheckchild"><label class="photocheck" for="001"><input class="gl" id="001" name="bmw" type="radio"/></label></div>
<div class="photocheckchild"><label class="photocheck" for="002"><input class="gl" id="002" name="bmw" type="radio"/></label></div>
<div class="photocheckchild"><label class="photocheck" for="003"><input class="gl" id="003" name="bmw" type="radio"/></label></div>
<div class="photocheckchild"><label class="photocheck" for="004"><input class="gl" id="004" name="bmw" type="radio"/></label></div>
</div>

Как поправить, подскажите, пожалуйста.

Comments

[0xD34F]

Поправить - меняем .parent() на .closest('.photocheckchild').

А ещё можно переписать, в том числе и без jquery - смотрите ответ.

[Антон]

Спасибо большое!

Answer 1

[0xD34F]

$('.gallery-colors-active').change(function() {
  const index = $('> :has(:checked)', this).index();
  $('.gallery_box > *').hide().eq(index).show();
}).find(':radio').eq(0).click();

или

const radioContainer = document.querySelector('.gallery-colors-active');

radioContainer.addEventListener('change', e => {
  const index = Array.prototype.findIndex.call(
    e.currentTarget.children,
    n => n.contains(e.target)
  );
  Array.prototype.forEach.call(
    document.querySelector('.gallery_box').children,
    (n, i) => n.hidden = i !== index
  );
});

radioContainer.querySelector('[type="radio"]').click();

или (в стили надо будет добавить .hidden { display: none; })

const radios = [...document.querySelectorAll('.gallery-colors-active [type="radio"]')];

radios.forEach(function(n) {
  n.addEventListener('change', this);
}, function(e) {
  const index = radios.indexOf(e.target);
  this.forEach((n, i) => n.classList.toggle('hidden', i !== index));
}.bind(document.querySelectorAll('.gallery_box .gallery-image')));

radios[0].click();

Comments

[Антон]

Спасибо большое!