Comment masquer toutes les sections dont les valeurs d'étendue contenant dépassent / n'excèdent pas la valeur actuelle du curseur de plage?
Curseur de plage HTML:
$(document).ready(function(){
var slider = document.getElementById("range");
var rdata = slider.value;
$("#main").find('#data').each(function () {
return parseInt($(this).text()) < rdata;
}).parent().parent().hide();
)}
3 Réponses :
Vous pouvez trouver toute la section dans l'élément id main et faire une boucle sur l'élément section et masquer . La balise section n'est pas trouvée par jQuery et vous pouvez la définir comme div avec la classe section . Vous pouvez également trouver jsfiddle.
var slider = document.getElementById("range");
var rdata = document.getElementById("price");
rdata.innerHTML = slider.value;
slider.oninput = function() {
$("span#price").text(slider.value);
$("#mainDiv").find("div.content").each(function() {
if(parseInt($(this).find("span#data").text()) < slider.value) {
$(this).parent().hide();
}
else {
$(this).parent().show();
}
});
}
Trouvez le jsfiddle Votre jsfiddle fixe
@ user3087516 veuillez vérifier le jsfiddle que j'ai créé. Il y a eu un problème avec votre code.
Merci! Il fonctionne, même "à la volée" tout en déplaçant le curseur du ranger.
Vous pouvez essayer ce qui suit:
$( document ).ready( function() {
$( '#range' ).on( 'change', function() {
var rdata = $( this ).val();
$( '#main .content span' ).each( function () {
if( parseInt( $( this ).text().replace( /\D/g, '' ) ) < rdata ) {
$( this ).closest( 'section' ).hide();
} else {
$( this ).closest( 'section' ).show();
}
} );
} );
} );
Voici le FIDDLE .
Modifier:
Autre question: est-il possible que la fonction de masquage fonctionne "sur la mouche "en déplaçant le curseur de plage et pas seulement après le clic de la souris / contrôle?
Vous pouvez le faire en changeant l'événement change en input dans le code ci-dessus.
Voici le nouveau FIDDLE .
Je vois que vous avez changé la valeur maximale du curseur de plage à 5000. Votre code fonctionne mais en ignorant la virgule dans les données de portée, falsifiant alors la cotation de prix réelle.
N'est-ce pas nécessaire? Quoi qu'il en soit, vous pouvez modifier le code selon vos besoins. Ceci n'est qu'un exemple concret.
Oui, je l'ai fait fonctionner maintenant! Btw, le sélecteur "le plus proche" est incroyable. Merci beaucoup!
Autre question: est-il possible que la fonction de masquage fonctionne "à la volée" en déplaçant le curseur de plage et pas seulement après le clic / contrôle de la souris?
@ user3087516 Génial! Ouais, vous pouvez en changeant l'événement change en input .
Essayez ceci:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span>Price from: </span><span id="price"></span><span> $</span>
<input type="range" min="0" max="100000" value="0" id="range"/>
<div id="main">
<section>
<div class="content">
<p>Current trade: <span class="data">4199</span> $ on the market</p>
</div>
</section>
<section>
<div class="content">
<p>Current trade: <span class="data">36237</span> $ on the market</p>
</div>
</section>
<section>
<div class="content">
<p>Current trade: <span class="data">78964</span> $ on the market</p>
</div>
</section>
</div>
$(document).ready(function(){
$("#price").text($("#range").val());
$("#range").change(function(){
var slider = $("#range").val();
$(".data").each(function(){
let val = $(this).text();
if(parseInt(val) < slider)
$(this).parents().eq(2).hide();
else
$(this).parents().eq(2).show();
});
});
});
Problème: les données de portée sont toujours une cotation de prix avec une virgule comme dans mon code source.
Remplacez
id = "data"par class puis.find ('. Data')Devriez-vous utiliser un point au lieu d'une virgule ici? 41,99, 362,37 et 789,64
Les données de portée sont toujours une offre de prix avec une virgule. Malheureusement, cela ne peut pas être changé.