Как сделать эти функции чище?

Question

Я не хочу добавлять новые строки в код JS каждый раз, когда добавляю новое изображение в HTML. Но я понятия не имею, как.

$(document).ready(function() {
$('.btn').click(function() {
var bid = $(this).attr('id');
if(bid=="img1" || bid == "img2" || bid == "img3"){
    document.getElementById("img1").style.display = "none";
    document.getElementById("img2").style.display = "none";
    document.getElementById("img3").style.display = "none";
        } else {
            document.getElementById("img4").style.display = "none";
            document.getElementById("img5").style.display = "none";
        }
        document.getElementById(bid).style.display = "block";
    });
});

CSS

.textures {
    background: url("images/room.png") center / cover no-repeat;
    position: static;
    height: 600px;
    width: 800px;
}
div>img {
    display: none;
    position: absolute;
}
[type=radio] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
[type=radio] + img {
    cursor: pointer;
    height: 60px;
    width: 80px
}
[type=radio]:checked + img {
    outline: 2px solid #000;
}

HTML. Здесь вы можете увидеть, если я щелкну по радиусу ввода из категорий, он отобразит одно из изображений из материалов.

<!--Room materials-->
<div class="textures">
    <div class="wall">
        <img id="img1" src="images/wall/blue.png" /> 
        <img id="img2" src="images/wall/brick.png" /> 
    </div>

    <div class="floor">
        <img id="img3" src="images/floor/cedro.png" /> 
        <img id="img4" src="images/floor/cipres.png" />
    </div>
</div>

<!--Categories-->
<h5>Walls</h5>
<label>
    <input type="radio" class="btn" id="img1" name="test" value="small" />
    <img src="images/thumbnail/wall/blue.png"/>
</label>
<label>
    <input type="radio" class="btn" id="img2" name="test" value="small" />
    <img src="images/thumbnail/wall/brick.png"/> 
</label>

<h5>Floors</h5>
<label>
    <input type="radio" class="btn" id="img3" name="test" value="small" />
    <img src="images/thumbnail/floor/cedro.png"/> 
</label>
<label>
    <input type="radio" class="btn" id="img4" name="test" value="small" />
    <img src="images/thumbnail/floor/cipres.png"/> 
</label>

Пример здесь .

И это действительно то, чего я хочу достичь.

Answer 1

Прежде всего, наличие дублирующих идентификаторов в одном документе недействительно HTML. Чтобы поместить данные в HTML, указывающие на соединение с другим элементом, вы можете вместо этого использовать атрибут данных. Извлеките атрибут данных, скройте все изображения, затем используйте атрибут данных в селекторе:

<input type="radio" class="btn" data-image="img4" name="test" value="small" />
                                ^^^^^^^^^^^^^^^^^

$('.btn').on('change', function() {
  const id = $(this).data('image');
  $('.textures img').hide();
  $('#' + id).show();
});