у меня есть n-ное количество карточек товара, с указанной внутри ценной, так же есть выпадающее меню с выбором критерия, как можно выстроить карточки в порядке убывания/возрастания по одному из критериев?
function dropMenu() {
let wind = document.querySelector('.select');
let drop = document.querySelector('.select__drop');
wind.onclick = () => {
if (drop.style.display == "none") {
drop.style.display = "block";
} else {
drop.style.display = "none";
}
}
}
function selectPar() {
let selected = document.querySelector('.select').querySelector('.selected');
let elem = document.querySelector('.select__drop').querySelectorAll('.drop__selected');
elem.forEach(el => {
el.onclick = () => {
selected.innerHTML = el.innerText;
}
})
}
dropMenu()
selectPar()
.b {
display: flex;
}
.block {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
width: 500px;
margin-right: 50px;
}
.card {
width: 100px;
height: 100px;
text-align: center;
padding-top: 10px;
}
.select {
width: 150px;
height: 20px;
border: 1px solid black;
cursor: pointer;
}
.selected {
margin: 0px;
}
.select__drop {
width: 150px;
height: 100px;
border: 1px solid red;
position: adsolute;
margin-top: 10px;
padding-left: 15px;
}
.drop__selected {
cursor: pointer;
transition: all .5s ease;
}
.drop__selected:hover {
transform: scale(1.1);
}
<div class="b">
<div class="block">
<div class="card" style="background:red;">
<p class="card__title">
Товар 1
</p>
<p class="card__price">
1050
</p>
</div>
<div class="card" style="background:green;">
<p class="card__title">
Товар 2
</p>
<p class="card__price">
1500
</p>
</div>
<div class="card" style="background:blue;">
<p class="card__title">
Товар 3
</p>
<p class="card__price">
1000
</p>
</div>
<div class="card" style="background:grey;">
<p class="card__title">
Товар 4
</p>
<p class="card__price">
5000
</p>
</div>
<div class="card" style="background:orange;">
<p class="card__title">
Товар 5
</p>
<p class="card__price">
2000
</p>
</div>
<div class="card" style="background:yellow;">
<p class="card__title">
Товар 6
</p>
<p class="card__price">
900
</p>
</div>
<div class="card" style="background:white;">
<p class="card__title">
Товар 7
</p>
<p class="card__price">
1200
</p>
</div>
<div class="card" style="background:pink;">
<p class="card__title">
Товар 8
</p>
<p class="card__price">
1500
</p>
</div>
</div>
<div class="select">
<p class="selected">
по умолчанию
</p>
<div class="select__drop" style="display: none;">
<p class="drop__selected">
по убыванию
</p>
<p class="drop__selected">
по возрастанию
</p>
</div>
</div>
</div>
document.querySelector('.select').querySelector('.selected')
не сократить доdocument.querySelector('.select .selected')
? Зачем лишние манипуляции с домом.