Élément de filtre basé sur la clé / valeur .data ()

StackOverflow https://stackoverflow.com/questions/1009485

  •  06-07-2019
  •  | 
  •  

Question

Disons que j'ai 4 éléments div de classe .navlink , qui, lorsque vous cliquez dessus, utilisez .data () pour définir une clé appelée 'selected' , avec une valeur de true : 

$('.navlink')click(function() { $(this).data('selected', true); })

Chaque fois qu'un nouveau .navlink est cliqué, je souhaite stocker le navlink précédemment sélectionné pour une manipulation ultérieure. Existe-t-il un moyen simple et rapide de sélectionner un élément en fonction de ce qui a été stocké avec .data () ?

Il ne semble pas exister de jQuery : filtres satisfaisants, et j'ai essayé les solutions suivantes (avec le même événement de clic), mais pour une raison quelconque, cela ne fonctionne pas: 

var $previous = $('.navlink').filter( 
    function() { $(this).data("selected") == true }
);

Je sais qu'il existe d'autres moyens de réaliser cela, mais pour l'instant, je suis simplement curieux de savoir si cela peut être fait via .data () .

Était-ce utile?

La solution

votre filtre fonctionnerait, mais vous devez indiquer la valeur true pour les objets correspondants de la fonction transmise au filtre pour qu'il puisse les récupérer. 

var $previous = $('.navlink').filter(function() { 
  return $(this).data("selected") == true 
});

Autres conseils

Pour mémoire, vous pouvez filtrer les données avec jquery (cette question est assez ancienne et jQuery a évolué depuis, il est donc correct d'écrire cette solution également): 

$('.navlink[data-selected="true"]');

ou, mieux (pour les performances): 

$('.navlink').filter('[data-selected="true"]');

ou, si vous souhaitez obtenir tous les éléments avec ensemble de données sélectionné : 

$('[data-selected]')

Notez que cette méthode fonctionnera uniquement avec les données définies via les attributs HTML. Si vous définissez ou modifiez des données avec l'appel .data () , cette méthode ne fonctionnera plus.

Nous pouvons créer un plugin assez facilement: 

$.fn.filterData = function(key, value) {
    return this.filter(function() {
        return $(this).data(key) == value;
    });
};

Utilisation (cochez une case d'option): 

$('input[name=location_id]').filterData('my-data','data-val').prop('checked',true);

Deux choses que j’ai remarquées (c’est peut-être une erreur de quand vous l’avez écrite).

  1. Vous avez manqué un point dans le premier exemple ( $ ('. navlink'). cliquez sur )
  2. Pour que le filtre fonctionne, vous devez renvoyer une valeur ( renvoyer $ (this) .data ("sélectionné") == true )

Cela ressemble à plus de travail que sa valeur.

1) Pourquoi ne pas simplement avoir une seule variable JavaScript qui stocke une référence à l'élément sélectionné \ jQuery actuellement sélectionné.

2) Pourquoi ne pas ajouter une classe à l'élément actuellement sélectionné. Vous pouvez ensuite interroger le DOM pour le message ".active". classe ou quelque chose.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top