Simple déclaration écrite avec jQuery, Comment pourrais-je écrire cela avec prototypejs déclaration

Question

écrit avec jQuery, Comment whould j'écris ceci avec prototype

$("#productNav li a").click(function(){ 
$("#productNav li a").removeClass("selectedProd"); 
$(this).addClass("selectedProd"); 
$("#productListCntnr > ul").slideUp(300); 
$("#productListCntnr > ul."+this.id).slideDown(300); 
}); 

Answer 1

Je ne suis pas sûr de la meilleure façon de gérer les choses glisser vous est en train de faire mais cela devrait faire la mécanique de base du clic et de l'ajout/suppression de la classe CSS selectedProd.

Event.observe(window, 'load', function() { 
    //When the window loads, iterate over all of the appropriate <a> tags 
    $$('#productNav li a').each(function(elem) { 

     //Handle the click event on each a tag 
     Event.observe(elem, 'click', function(event) { 
      //Remove the selectedProd class from all <a> tags 
      $$('#productNav li a').each(function(elem) { 
       elem.removeClassName('selectedProd'); 
      }); 

      //Add the selectedProd class to the <a> tag that was clicked 
      this.addClassName('selectedProd'); 

      //Stop the browser from following the link specified in the href="" 
      Event.stop(event); 
     }); 
    }); 
}); 

Answer 2

Alors que je pensais à cette marque déjà répondu, mais je suis venu avec les éléments suivants:

$$("#productNav li a").observe('click', function(event){ 
    $$("#productNav li a").invoke('removeClassName', 'selectedProd')); 
    $$("#productListCntnr > ul").invoke('SlideUp',{ duration: 3.0 }); 
    Event.element(event).invoke('addClassName', 'selectedProd')); 
    $$("#productListCntnr > ul#"+Event.element(event).id).invoke('SlideDown',{ duration: 3.0 }); 
}); 

Les méthodes SlideUp et SlideDown proviennent de Scriptaculous, pas sûr si elles sont directement compatibles avec l'effet jQuery. Je vous ai aussi voulu dire supposais ul# dans cette dernière ligne depuis vous choisissez par ID, auquel cas, étant donné que ID est unique de toute façon, vous pouvez probablement le faire comme ceci:

Effect.SlideDown(Event.element(event).id, { duration: 3.0 }); 

--edit

a la suite du commentaire de Mark J'ai eu un aller avec le code ci-dessus dans un navigateur réel, voici une version de travail:

Event.observe(window, 'load', function() { 
    $$("#productNav li a").invoke('observe', 'click', function(event){ 
     $$("#productNav li a.selectedProd").invoke('removeClassName', 'selectedProd'); 
     Event.element(event).addClassName('selectedProd'); 
     Effect.Pulsate(Event.element(event).id, { pulses: 5, duration: 3.0 }); 
    }); 
}); 

Je ne savais pas ce que slideUp était censé faire, donc je l'ai sorti, Je suppose qu'il ne fonctionne pas sur les mêmes éléments de liste que ceux de productNav? SlideDown n'a pas semblé faire quoi que ce soit non plus, probablement parce que SlideUp était parti, donc je l'ai échangé pour Pulsate juste pour confirmer que ça fonctionnait. J'ai dû utiliser la syntaxe alternative mentionnée ci-dessus car l'original ne fonctionnait pas du tout (une erreur comme la méthode invoke n'existe pas sur l'élément).

Je suppose que le code original est destiné à SlideUp et SlideDown une zone de contenu distincte des éléments de menu? Dans ce cas, ce code devrait changer, mais votre code HTML original serait également invalide car cela impliquerait que les éléments de la liste dans le menu et les éléments de la liste dans la zone de contenu ont les mêmes identifiants. Pour référence, voici ce que mon HTML ressemble à:

<ul id="productNav"> 
    <li><a id="p1" href="#">Product 1</a></li> 
    <li><a id="p2" href="#">Product 2</a></li> 
    <li><a id="p3" href="#">Product 3</a></li> 
    <li><a id="p4" href="#">Product 4</a></li> 
    <li><a id="p5" href="#">Product 5</a></li> 
    <li><a id="p6" href="#">Product 6</a></li> 
</ul>