Afficher et masquer des éléments basés sur des données- * Attribut

Question

Cela semble assez simple pour JQuery, mais cette fonction masque toute la forme ... quelqu'un peut-il me diriger dans la bonne direction?

$('form') 
     .children() 
     .filter(function(){ 
      return $(this).data('show', 'pro') 
     }) 
     .show(); 
$('form') 
     .children() 
     .filter(function(){ 
      return $(this).data('show', 'home') 
     }) 
     .hide(); 

Answer 1

Vous passer 2 arguments à la data method, mettant ainsi au lieu de récupérer la valeur ancienne.

Utilisez ce lieu:

$('form') 
     .children() 
     .filter(function(){ 
      return $(this).data('show') === 'pro'; 
     }) 
     .show(); 
$('form') 
     .children() 
     .filter(function(){ 
      return $(this).data('show') === 'home'; 
     }) 
     .hide(); 

Vous pouvez également mettre en cache votre sélection pour la performance (ou utiliser end).

Answer 2

Vous ne savez pas exactement ce que vous essayez de faire du code.

accéder à "Data-" avec JQ, j'utilise:

$(elementSelector).attr('data-XXX'); 

où les données-XXX est l'attribut de la balise. Cela fonctionne dans tous les navigateurs retour à IE7 que j'ai vu.

Answer 3

Si les valeurs montrent des données dans votre code HTML ou définis comme attributs sur chaque objet, vous pouvez le faire entièrement avec un sélecteur:

$('form > [data-show="pro"]').show(); 
$('form > [data-show="home"]').hide(); 

En guise d'explication:

• Le form sélectionne évidemment les éléments de forme
• le > sélectionne un enfant de l'objet de forme
• le [data-show="pro"] se lète seulement les enfants qui ont un attribut nommé data-show qui est défini sur la valeur de "pro"
• Le .show() appelle la méthode exposition sur les objets sélectionnés

Si vos valeurs-show de données sont définies avec la méthode .data() jquery donc la méthode précédente ne fonctionnerait pas, alors vous feriez mieux de définir l'état comme un nom de classe plutôt qu'une valeur de données que vous pouvez utiliser plus facilement dans un sélecteur. Si ces valeurs ont été définies comme les noms de classe au lieu de données, le code ressemblerait à ceci:

$('form > .pro').show(); 
$('form > .home').hide(); 

Rappelez-vous, vous pouvez avoir plusieurs noms de classe sur un état d'objet et de l'objet qui est directement utilisé pour contrôler la présentation du objet (styles CSS, visibilité, mise en forme, etc.) est beaucoup, beaucoup mieux représenter en tant que noms de classe plutôt que des attributs data-xxx parce qu'il est beaucoup plus facile de l'utiliser dans les sélecteurs pour les opérations CSS ou jQuery.