Bonjour,
max30 a écrit :
Je ne vois pas le grain de sable dans les rouages
Il y en avait pas mal pourtant.
J'ai l'impression que tu codes un peu au hasard ! Mais au moins, tu as essayé. Donc déjà, c'est un bon point.
Voici ci-dessous une version qui devrait fonctionner. J'ai changé beaucoup de choses dans le javascript. Il y avait de l'idée, mais c'était très incomplet et parsemé de bugs. J'ai changé aussi un peu le html et les noms de classes. Il vaut mieux mettre les annonces dans un conteneur qui les regroupe, et le select pour le tri dans un autre conteneur. Comme ça, c'est plus facile pour effacer et remettre les annonces dans le html après un tri. Attention aussi dans les <span class="valeur">xxx</span> : il ne faut pas d'espace avant et après le nombre xxx. J'ai retiré ces espaces dans le code html. Ou alors il faut écrire une fonction de récupération de ces valeurs plus robuste. Les autres modifications dans le html sont cosmétiques et pas vraiment nécessaires. Voir aussi
https://jsfiddle.net/parsimonhi/1tLahnmy/
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body>div {margin:1em;}
.annonce img {width:240px; height:170px;}
</style>
</head>
<body>
<div class="selecteur-de-tri">
<span>Trier</span>
<select onchange="trier()" id="prix-superficie">
<option value="Default">Default</option>
<option value="PriceLowToHigh">Prix du plus bas au plus haut</option>
<option value="PriceHighToLow">Prix du plus haut au plus bas</option>
<option value="SuperficieLowToHigh">Superficie du plus bas au plus haut</option>
<option value="SuperficieHighToLow">Superficie du plus haut au plus bas</option>
</select>
</div>
<div class="liste-des-annonces">
<div class="annonce">
<div class="slider" >
<img class ="active" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/Warwick_Castle_May_2016.jpg/320px-Warwick_Castle_May_2016.jpg">
</div>
<div class= "informations">
<a class="maquette" href="/principales/single.php?id=32">
<p class='title'>Titre1</p>
<p class='price'><span class='mru'>Prix : </span><span class='valeur'>210</span></p>
<p class='superficie'>
<i class='fas fa-chart-area'></i>
<span class='valeur'>250</span> m2</p>
<p class='date'> <i class='fa fa-calendar'></i> 2022-01-28</p>
<p class='city'> <i class='fa fa-map-marker' style='font-size:15px'></i>VilleA</p>
</a>
</div>
</div>
<div class="annonce">
<div class="slider" >
<img class ="active" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/Broadway_Tower_2012.jpg/320px-Broadway_Tower_2012.jpg">
</div>
<div class= "informations">
<a class="maquette" href="/principales/single.php?id=32" >
<p class='title'>Titre2</p>
<p class='price'><span class='mru'>Prix : </span><span class='valeur'>21</span></p>
<p class='superficie'> <i class='fas fa-chart-area'></i> <span class='valeur'>200</span> m2</p>
<p class='date'> <i class='fa fa-calendar'></i> 2022-01-29</p>
<p class='city'> <i class='fa fa-map-marker' style='font-size:15px'></i>VilleB</p>
</a>
</div>
</div>
<div class="annonce">
<div class="slider" >
<img class ="active" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/Bratislava_Castle_R01.jpg/320px-Bratislava_Castle_R01.jpg">
</div>
<div class= "informations">
<a class="maquette" href="/principales/single.php?id=32">
<p class='title'>Titre1</p>
<p class='price'><span class='mru'>Prix : </span><span class='valeur'>140</span></p>
<p class='superficie'>
<i class='fas fa-chart-area'></i>
<span class='valeur'>220</span> m2</p>
<p class='date'> <i class='fa fa-calendar'></i> 2022-01-30</p>
<p class='city'> <i class='fa fa-map-marker' style='font-size:15px'></i>VilleA</p>
</a>
</div>
</div>
</div>
<script>
function compare(a, b, className, sens) {
let valueA, valueB;
valueA = sens * parseFloat(a.querySelector('.' + className + ' .valeur').innerHTML);
valueB = sens * parseFloat(b.querySelector('.' + className + ' .valeur').innerHTML);
if (valueA < valueB) return -1;
if (valueB < valueA) return 1;
return 0;
}
function triDonnees(className, sens) {
let nodes = document.querySelectorAll(".annonce");
let elements = Array.from(nodes);
let list = nodes[0].parentNode;
elements.sort((a, b) => compare(a, b, className, sens));
list.innerHTML = "";
elements.forEach(e => list.appendChild(e));
}
function trier() {
let tri = document.getElementById("prix-superficie");
if (tri.value == "PriceLowToHigh") {
triDonnees("price", 1);
} else if (tri.value == "PriceHighToLow") {
triDonnees("price", -1);
} else if (tri.value == "SuperficieHighToLow") {
triDonnees("superficie", -1);
} else if (tri.value == "SuperficieLowToHigh") {
triDonnees("superficie", 1);
}
}
</script>
</body>
</html>
EDIT 1: j'ai dû procéder à quelques modifications dans le code après l'avoir posté. Rien d'important.
EDIT 2: j'ai finalement remplacé :
let elements = Array.prototype.slice.call(nodes, 0);
par
let elements = Array.from(nodes);
On est en 2022. On peut désormais se le permettre.
EDIT 3: j'ai corrigé a posteriori la fonction compare() et remplacé la 2e comparaison if (valueA < valueB) return 1; par if (valueB < valueA) return 1; (un bug qui peut passer inaperçu).
Amicalement,
Modifié par parsimonhi (31 Jan 2022 - 12:18)
