Bonjour,
Voilà, j'ai une liste déroulante.
Sous javascript mon code permet à l'utilisateur d'affiné sa recherche sur mon site.
En l’occurrence, nous parlons des arrondissements de Lyon.
Quand il clic sur Lyon 2eme par exemple, je souhaite que tout les résultats avec div class="lyon2" reste, et le reste ce mette en display none.
J'y suis enfin arrivé ! Le problème c'est que dés que je clic sur "Lyon 2" par exemple, le site prends en compte qu'une seul DIV et laisse le reste. Donc j'ai seulement 1 résultat qui disparaît, les résultats restant ne disparaissent pas..
A savoir que je suis sous wordpress, et pour la class j'utilise l'extension "type" donc j'ai juste a écrire la class que je veux en fin d'article et il s'affiche.
Voici mes codes :
JAVASCRIPT
CODE PHP
Voilà, j'ai une liste déroulante.
Sous javascript mon code permet à l'utilisateur d'affiné sa recherche sur mon site.
En l’occurrence, nous parlons des arrondissements de Lyon.
Quand il clic sur Lyon 2eme par exemple, je souhaite que tout les résultats avec div class="lyon2" reste, et le reste ce mette en display none.
J'y suis enfin arrivé ! Le problème c'est que dés que je clic sur "Lyon 2" par exemple, le site prends en compte qu'une seul DIV et laisse le reste. Donc j'ai seulement 1 résultat qui disparaît, les résultats restant ne disparaissent pas..
A savoir que je suis sous wordpress, et pour la class j'utilise l'extension "type" donc j'ai juste a écrire la class que je veux en fin d'article et il s'affiche.
Voici mes codes :
JAVASCRIPT
<script type="text/javascript">
window.onload=function(){
function selectionDone(e){
var showAll = (e.target.value == "-1") ? 1 : 0,
divs = document.getElementById("choixxxx").children,
i = 0,
l = divs.length;
for (; i<l; i++) {
divs[i].style.display = (showAll) ? "block" : "none";
}
var toShow = document.getElementsByClassName(e.target.value);
i = 0;
l = toShow.length;
if (!showAll) for(; i<l; i++) toShow[i].style.display = "block";
}
var select = document.querySelector("select");
select.children[0].setAttribute("selected", "");
select.addEventListener("change", selectionDone, false);
}
</script>
CODE PHP
<?php
get_header();
?>
<div id="section">
<?php $term=get_term_by('slug',get_query_var('term'),get_query_var('taxonomy')); ?>
<h4><u>Affinez votre recherche par <script type="text/javascript">
var url = document.location.href;
if ((url == 'http://monlien.com/bron' ) LE RESTE DES URL ICI...)
{
document.write("catégorie");
}
else if ((url == 'http://monlien.com/alimentation-boissons' ) LE RESTE DES URL ICI...)
{
document.write("ville/arrondissement");
}
</script> dans <?php echo $term->name; ?></u> :</h4>
<script type="text/javascript">
var url = document.location.href;
if ((url == 'http://monlien.com/bron' )LE RESTE DES URL ICI..)
{
document.write("à venir..........");
}
else if ((url == 'http://monlien.com/alimentation-boissons' )LE RESTE DES URL ICI..)
{
document.write("<select><option value='-1'>---</option><option value='bron'>Bron</option><option value='caluire'>Caluire et Cuire</option> <option value='champagne'>Champagne au Mont d'Or</option><option value='collonges'>Collonges au Mont d'Or</option><option value='ecully'>Ecully</option><option value='francheville'>Francheville</option><option value='mulatiere'>La Mulatière</option><option value='lyon1'>Lyon 1</option><option value='lyon2'>Lyon 2</option><option value='lyon3'>Lyon 3</option><option value='lyon4'>Lyon 4</option><option value='lyon5'>Lyon 5</option><option value='lyon6'>Lyon 6</option><option value='lyon7'>Lyon 7</option><option value='lyon8'>Lyon 8</option><option value='lyon9'>Lyon 9</option><option value='oullins'>Oullins</option><option value='pierre-benite'>Pierre-Bénite</option><option value='saint-fons'>Saint-Fons</option><option value='sainte-foy'>Sainte-Foy-Lès-Lyon</option><option value='st-cyr'>St Cyr au Mont d'Or</option><option value='st-didier'>St Didier au Mont d'Or</option><option value='tassin'>Tassin la Demi-Lune</option><option value='venissieux'>Vénissieux</option><option value='villeurbanne'>Villeurbanne</option></select>");
}
</script>
<h1>Toutes les réductions dans <?php echo $term->name; ?> :</h1>
</div>
<div id="section">
<?php
// The Query
global $query_string;
query_posts( $query_string . '&orderby=rand' );
// The Loop
if( have_posts() ) : while ( have_posts() ) : the_post();
?>
<?php
if( has_post_thumbnail() ){
?>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
<?php
} else {
$nom_enseigne = types_render_field("nom-enseigne", array("raw"=>"true"));
$localisation = types_render_field("localisation-offre", array("raw"=>"true"));
$bg_color = types_render_field("bg-color", array("raw"=>"true"));
if( !$bg_color ) { $bg_color = '#2B96CC'; }
$logo_img_url = types_render_field("logo-commerce", array("raw"=>"true"));
$resume = types_render_field("resume-offre", array("raw"=>"true"));
$clastricm = types_render_field("class-trie-commerce", array("raw"=>"false"));
?>
<div id="choixxxx">
<div class="<?php
echo $clastricm;
?>">
<div class="reduc">
<div class="reduc-bon-auto">
<div class="top"><span class="title"><h2><a href="<?php the_permalink(); ?>" style="color:black;"><?php echo $nom_enseigne.' '.$localisation; ?></a></h2></span></div>
<div class="middle" style="background-color: <?php echo $bg_color; ?>">
<a href="<?php the_permalink(); ?>" class="logo"><img src="<?php echo $logo_img_url; ?>"></a>
</div>
<div class="bottom" style="padding: 5px;">
<p class="offer-description"><?php echo $resume; ?></p>
</div>
</div>
<?php
}
?>
</div></div></div>
<?php
endwhile;
else :
?>
<p>Désolé, aucune réduction n'est disponible ici pour le moment.</p>
<?php
endif;
// Reset Query
wp_reset_query();
?>
</div><!-- fin id section -->
<?php
get_footer();
?>
[/i][/i]