jquery: afficher/masquer basé sur la variable pour le nom de la classe

Je suis assez nouveau à jQuery et ont besoin de l'aide avec le filtrage des classes. L'utilisateur peut choisir de neuf boutons pour sélectionner les types d'événements à afficher/masquer. Cliquez sur une couleur et que les événements avec cette couleur, et le reste sont cachés. Cliquez sur "tous" et tous les événements montrent aucun cachés. Tous les événements de commencer avec des display:block.

Exemple des boutons de contrôle:

<li class="all" id="all-events"><a href="#" onclick="showEvents('event-all')">
<img src="swatch-all.png" alt="" /></a></li>

<li class="red" id="red-events"><a href="#" onclick="showEvents('event-red')">
<img src="swatch-red.png" alt="" /></a></li>

<li class="blue" id="blue-events"><a href="#" onclick="showEvents('event-blue')">
<img src="swatch-blue.png" alt="" /></a></li>

Les événements sont tirés à partir d'une base de données en php et ressembler à cet exemple:

<div id="bigCal">
    <p class="all"><a href="http://foo.com" title="All event">All events</a></p>
    <p class="blue"><a href="http://bar.com" title="Blue event">Blue event</a></p>
    <p class="red"><a href="http://foobar.com" title="Red event">Red event</a></p>
</div>

J'ai travaillé sur le jQuery pour deux jours! Pas sûr que d'utiliser .filter ou .hasClass ou .is. Rien de tout cela fonctionne. Le plus simple que j'ai essayé était:

function showEvents(color) {
    ($('p').hasClass(color)) ? this.style.display="block" : this.style.display="none";
}

Une autre tentative qui n'a rien n'a été

function showEvents(color){
    $("p[className*='event-']").css('display', 'none');
    $("p[className=color]").css('display', 'block');
    if ($("p[className='event-all']")) 
        $("p[className*='event-']").css('display', 'block');
}

Toute aide sera appréciée!

OriginalL'auteur dac | 2010-12-18

5

Voici un exemple de comment faire cela.

http://jsfiddle.net/YnFWX/1/

Je ne suis pas à l'aide d'images, mais vous obtenez l'idée. Notez que je ne suis pas l'attribution de javascript à l'aide de la "onclick" de l'événement. Beaucoup plus propre si vous le faites via jQuery.

Espère que cela va vous aider à démarrer.

Bob

Excellent! En ajoutant le "tout" de la classe pour chaque couleur (class="rouge"), qui le rend facile pour tous. Qui m'avait totalement perplexe--comment obtenir toutes les autres classes facilement. Merci! Ainsi que l'apprentissage sur jsfiddle.net. C'est pas cool ça!
Le code pour obtenir le onclick grâce à jQuery a été vraiment utile, aussi. Merci de tester pour moi. A fait toute la différence et c'était tellement facile à mettre en place sur mon site.

OriginalL'auteur rcravens
1

Vous êtes sur la bonne voie, mais vous semblez être de passage "événement" tout-en showEvents au lieu de "tous".

Donc, si vous changez votre onclick code de showEvents('all'), showEvents('blue'), etc... il devrait fonctionner.

Cependant, j'ai une approche différemment. Il est beaucoup plus facile de céder votre onclick gestionnaires à l'aide de jQuery, en premier lieu, et de trouver la couleur qui a été cliqué à l'intérieur de ce gestionnaire en regardant la classe sur le <li>, plutôt que de le laisser passer.
```
//The is the same as onclick=.... but for ALL <a> elements within an <li>
$("li > a").click(function () {

   //Find the color that was clicked
   var color = $(this).parent().attr("class");

   //"All" is a special case
   if (color == "all") {
      //Show all <p>s in div with ID "bigCal"
      $("#bigCal p").show();
   } else {
      //Hide all <p>s in div with ID "bigCal"
      $("#bigCal p").hide();

      //Show the <p> with the same class
      $("#bigCal p." + color).show();
   }

});
```
Vous avez raison que de trouver les cliqué sur le bouton à l'aide de jQuery. Il est beaucoup plus propre. ^_^ Merci!

OriginalL'auteur David Tang
1
```
function showEvents(color){
var csscol=color.split('-')[1];//will return red/blue/all from event-red/event-blue/event-all
$('p[class!=' + csscol + ']').hide(); //hide all not equal to csscol
$('p[class=' + csscol + ']').show(); //show all equal to csscol
}
```
C'est la première fois que j'ai posé une question sur ce forum et je suis vraiment impressionné par la durée de réponses qui est arrivé tellement vite! Je vous remercie, vous tous!
u r bienvenue également à ajouter rep ou marquer comme réponse

OriginalL'auteur Omkar

C'est la solution que j'ai pour vous. J'ai changé votre onclick appels pour refléter le nom réel de vos classes.

Javascript

function showEvents(color) {
         if(color!='all')
         {
            jQuery('#bigCal > p').hide();
            jQuery('.'+color).show();
         }
         else{jQuery('#bigCal > p').show();}
      }

HTML

<ul>
      <li class="all" id="all-events">
        <a href="#" onclick="showEvents('all')">Show All</a>
      </li>
      <li class="red" id="red-events">
        <a href="#" onclick="showEvents('red')">Show Red</a>
      </li>
      <li class="blue" id="blue-events">
        <a href="#" onclick="showEvents('blue')">Show Blue</a>
      </li>
    </ul>
   <div id="bigCal">
      <p class="all"><a href="http://foo.com" title="All event">All events</a></p>
      <p class="blue"><a href="http://bar.com" title="Blue event">Blue event</a></p>
      <p class="red"><a href="http://foobar.com" title="Red event">Red event</a></p>
   </div>

Que dit - je l'ai trouvé Visual jQuery inestimable alors que j'étais en train d'apprendre jQuery: http://api.jquery.com/visual/

Merci de me le dire à propos de Visual jQuery. ^_^

OriginalL'auteur jeremysawesome

function showEvents(color){
 if(color=='event-all'){
   $('p').css('display','block');
 }else{
   $('p').css('display','none');
   $('p.'+color.replace('event-','')).css('display','block');
 }
}

OriginalL'auteur Andy

function showEvents(color){
    $(p["class^='event-'"]).each(function() {
       if(!this.hasClass(color))this.hide();//or .css(display:none;)
       else {this.show()};
})

Je pense que cela devrait être la solution si j'ai bien compris votre question.
FJ

OriginalL'auteur Muha

Vous devez vous connecter pour publier un commentaire.