There are 4 identical block layouts in which 2 blocks change depending on the radio selected. How to make it so that the code is not large and at the same time changing one radio does not affect the neighboring blocks. Now, if you choose, the content changes in all blocks.

Script:

$('.model_descr').find('input[type="radio"]').on('change', function(){ if ($(this).val()=='bb') { $(".bb").show(); $(".kk").hide(); } else { $(".kk").show(); $(".bb").hide(); } });

Layout of one block (I repeat, there are 4 of them)

Headline

  <div class="result-wrapper"> <img src="images/4b/before.jpg" alt="" class="before" /> </div> <img src="images/4b/after.jpg" alt="" class="after" /> <div class="drag-cursor"></div> </div> <div class="result-item-slider kk"> <div class="result-wrapper"> <img src="images/4k/before.jpg" alt="" class="before" /> </div> <img src="images/4k/after.jpg" alt="" class="after" /> <div class="drag-cursor"></div> </div> <div class="model_descr decr"> <div class="ultitle">Описание:</div> <ul> <li>1</li> <li>2</li> </ul> </div> <div class="model_descr check-type"> <div class="ultitle">Вариант исполнения:</div> <ul> <li> <input checked type="radio" id="s-option-4" name="selector4" value="bb"> <label for="s-option-4">ББ</label> <div class="check"><div class="inside"></div></div> </li> <li> <input type="radio" id="f-option-4" name="selector4" value="kk"> <label for="f-option-4">КК</label> <div class="check"></div> </li> </ul> </div> <div class="model_price bb"> <div class="ultitle">Цена:</div> <span>88 888</span> руб </div> <div class="model_price kk"> <div class="ultitle">Цена:</div> <span>12 000</span> руб</div> <div class="clear"></div> </div>

  • I think it’s about classrooms - Hasanagha Aliyev

1 answer 1

Perhaps such a solution would suit you if it is possible to get a parent element in which there will be switchable blocks and checkboxes:

 $('.model_descr').find('input[type="radio"]').on('change', function () { var item = $(this); var parent = item.closest('селектор родительского элемента'); var bb = parent.find('.bb'); var kk = parent.find('.kk'); if (item.val() == 'bb') { bb.show(); kk.hide(); } else { kk.show(); bb.hide(); } });