afficher et masquer des éléments basés sur des données* attribut

Cela semble comme il devrait être facile pour JQuery à faire, mais cette fonction est de cacher l'ensemble de la forme... quelqu'un peut me pointer dans la bonne direction?

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

OriginalL'auteur Chris Sobolewski | 2012-01-27

  1. 8

    Vous êtes de passage 2 arguments à la méthode, donnant ainsi à la place de la récupération de l'ancienne valeur.

    Utiliser 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 le cache de votre sélecteur de performance (ou de l'utilisation fin).

    $.de données() semble être pas défini à l'intérieur de mon filtre. Aussi, votre code s'affiche toujours à se cacher le tout.
    Scratch de mon dernier commentaire... j'ai juste jeté un minimaliste de violon, c'est de travailler, donc quelque chose d'autre se passe ici.

    OriginalL'auteur Joseph Silber

  2. 5

    Si les données-afficher les valeurs sont dans votre code HTML ou un ensemble comme des attributs de chaque objet, vous pouvez le faire entièrement avec un sélecteur:

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

    Par manière d'explication:

    • La form évidemment sélectionne les éléments de formulaire
    • La > sélectionne un enfant de l'objet de formulaire
    • La [data-show="pro"] ne sélectionne que les enfants qui ont un attribut nommé data-show qui est définie à la valeur de "pro"
    • La .show() appelle la méthode afficher sur les objets sélectionnés

    Si vos données-afficher les valeurs sont définies avec la .data() méthode jquery si la méthode précédente ne fonctionne pas, alors vous feriez mieux d'é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 ressemblera à ceci:

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

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

    intéressant... tous ne sont pas de descendants directs, cependant. Puis-je utiliser $("form [data-show='foo']").show() ? Cela semble beaucoup plus efficace.
    oui, si vous n'êtes pas à la recherche que pour les descendants directs (dont votre code d'origine a été), vous pouvez enlever le >, et comprend tous les descendants, et pas seulement les enfants directs.

    OriginalL'auteur jfriend00

  3. 0

    pas tout à fait sûr de ce que vous essayez de faire du code.

    d'accès "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 de retour à la version IE7 que j'ai vu.

    Que n'aurez qu'à sélectionner par le data attributs qui sont à la source de code html. Il ne sélectionnez pas par l'ajout de données de jQuery data méthode!
    Selon leur site web, depuis JQuery 1.4 .de données() se penchera sur les attributs data -.

    OriginalL'auteur circusdei