Как поправить 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]

index = $this.find('input:checked').closest('.photocheckchild').index()

[Антон]

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