Несколько радиопроизводительных кнопок в виде фильтров ⇐ Html

[Anonymous]

Проблема < /h3>

Я пытаюсь создать двойной фильтр, где вы можете объединить фильтры из нескольких категорий. Например, первая категория фильтров - это годы, а второй один тип медиа. Я хочу сделать так, чтобы вы могли фильтровать только за эти годы, тип медиа или оба типа медиа -типа X (музыка в 1960 -х годах). Кроме того, я пытаюсь сделать выбранные фильтры, так или иначе, чтобы вы могли отслеживать, какие из них активны (я пытался сделать их смелыми, и это работает для первого набора фильтров, но не удастся для второго. Как решить эту проблему? />https://codepen.io/erutuf/pen/zpwdbq

попытка < /h3>

Код: Выделить всё

filterSelection("all")

function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("filterDiv");
if (c == "all") c = "";
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}

function w3AddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {
element.className += " " + arr2[i];
}
}
}

function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}

// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}< /code>
.filterDiv {
float: left;
background-color: white;
color: black;
width: 37vw;
line-height: 100px;
text-align: center;
margin: 5px;
display: none;
margin-right: 15px;
}

.show {
display: block;
}

.container {
margin-top: 20px;
overflow: hidden;
}

/* Style the buttons */
.btn {
border: none;
outline: none;
padding: 0;
padding-right: 40px;
background-color: white;
cursor: pointer;
font-size: 16px;
font-weight: normal;
}

.btn:hover {}

.btn.active {
font-weight: bold;
}

.content {
font-size: 16px;
line-height: 20px;
text-align: left;
}< /code>


Show all
1950
1960
1970


All Media
Movies
Music
Newspapers


1950 Newspapers Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.




1960 Music Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.




1960 Newspapers Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Подробнее здесь: https://stackoverflow.com/questions/553 ... as-filters