Я хочу сохранить только один .menu active за раз, поэтому я настроил код для удаления активного класса последнего .menu, который получил класс active. Я не могу использовать id, потому что у меня есть несколько элементов, каждый из которых имеет свой уникальный идентификатор, поэтому я попытался использовать data-type & data-id для вызова каждого уникального набора кнопок и меню.
Как получить код для удаления последнего active класса .menu, когда на каждом элементе выбрана одна из других переключателей? Другими словами, присвойте класс active .menu соответствующей ему кнопки, но затем удалите его, если проверяется другое радио или проверяется снова (удаляя все меню active).
$('input[name="studio"]').change(function() {
var t = $(this).closest(".item");
var id = $(this).data("type");
$(".menu[data-id=" + id + "]").toggleClass("active", this.checked);
var menuCat = t.find(".menu--categories");
var menuLoc = t.find(".menu--locations");
var menuProj = t.find(".menu--projects");
var btnCat = $(this).closest(".cat_label").find("input[id=" + id + "]");
var btnLoc = $(this).closest(".loc_label").find("input[id=" + id + "]");
var btnProj = $(this).closest(".proj_label").find("input[id=" + id + "]");
if (btnCat.is(":checked") && $(this).attr("id") === btnLoc) {
btnLoc.prop("checked", true);
btnCat.prop("checked", false);
btnProj.prop("checked", false);
menuCat.removeClass("active");
}
if (btnCat.is(":checked") && $(this).attr("id") === btnProj) {
btnProj.prop("checked", true);
btnLoc.prop("checked", false);
btnCat.prop("checked", false);
menuCat.removeClass("active");
}
if (btnLoc.is(":checked") && $(this).attr("id") === btnCat) {
btnCat.prop("checked", true);
btnProj.prop("checked", false);
btnLoc.prop("checked", false);
menuLoc.removeClass("active");
}
if (btnLoc.is(":checked") && $(this).attr("id") === btnProj) {
btnProj.prop("checked", true);
btnCat.prop("checked", false);
btnLoc.prop("checked", false);
menuLoc.removeClass("active");
}
if (btnProj.is(":checked") && $(this).attr("id") === btnCat) {
btnCat.prop("checked", true);
btnProj.prop("checked", false);
btnLoc.prop("checked", false);
menuProj.removeClass("active");
}
if (btnProj.is(":checked") && $(this).attr("id") === btnLoc) {
btnLoc.prop("checked", true);
btnProj.prop("checked", false);
btnCat.prop("checked", false);
menuProj.removeClass("active");
}
});
.wrap {
display: flex;
}
.item {
border: 2px solid
}
.menu {
height: 20px;
width: 60px;
border: 1px solid
}
.active {
background: blue
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
<div class="menu menu--categories" data-id="cat"></div>
<label class="cat_label" for="cat" data-btn="categories">
<input id="cat" data-type="cat" type="radio" name="studio" />
Categories
</label>
<div class="menu menu--locations" data-id="loc"></div>
<label class="loc_label" for="loc" data-btn="locations">
<input id="loc" data-type="loc" type="radio" name="studio" />
Locations
</label>
<div class="menu menu--projects" data-id="proj"></div>
<label class="proj_label" for="proj" data-btn="projects">
<input id="proj" data-type="proj" type="radio" name="studio" />
Projects
</label>
</div>
<div class="item">
<div class="menu menu--categories" data-id="cat_2"></div>
<label class="cat_label" for="cat_2" data-btn="categories">
<input id="cat_2" data-type="cat_2" type="radio" name="studio" />
Categories
</label>
<div class="menu menu--locations" data-id="loc_2"></div>
<label class="loc_label" for="loc_2" data-btn="locations">
<input id="loc_2" data-type="loc_2" type="radio" name="studio" />
Locations
</label>
<div class="menu menu--projects" data-id="proj_2"></div>
<label class="proj_label" for="proj_2" data-btn="projects">
<input id="proj_2" data-type="proj_2" type="radio" name="studio" />
Projects
</label>
</div>