Вы можете сделать это следующим образом: прочитайте атрибут id
button
, скройте все div
элементы с name
, не соответствующими этому id
, и покажите только div с равным name
к этому id
.
$('.type-btn').click(function(){
let selected = $(this).attr("id");
$("div[name!=" + selected + "]").hide();
$("div[name=" + selected + "]").show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="residential" class="type-btn">Residential</button>
<button id="comercial" class="type-btn">Comercial</button>
<button id="boat" class="type-btn">Boat</button>
<div name="residential" class="type-cleaning" style="display:none">Residential</div>
<div name="comercial" class="type-cleaning" style="display: none">Comercial</div>
<div name="boat" class="type-cleaning" style="display:none">Boat</div>
<div name="residential" class="bill-cleaning" style="display: none">Bill Residential</div>
<div name="boat" class="bill-cleaning" style="display: none">Bill Boat</div>
Обновление: поскольку это решение приводит к проблемам, поскольку все остальные элементы div на странице были скрыты, а также они не имеют имени, равного 3 именам в вопросе, вот решение, которое предназначается только для div, которые не имеют совпадающего имени, но также имеют имя класса, оканчивающееся на -cleaning
, чтобы предназначаться только для этих 5 элементов. Конечно, это не сработает, если есть другие div с именем класса, оканчивающимся на -cleaning
, которые не должны быть нацелены.
$('.type-btn').click(function(){
let selected = $(this).attr("id");
$("div[name!=" + selected + "][class$='-cleaning']").hide();
$("div[name=" + selected + "]").show();
});