web-dev-qa-db-fra.com

Jquery - Simple Array, poussant l'élément s'il n'est pas déjà là, supprimant l'élément s'il y est

Je construis un système de filtrage simple, je veux simplement ajouter une chaîne à un tableau et l'enlever si c'est déjà là au clic d'un lien. Je vais essayer d'expliquer le mieux que je peux ..

$(document).ready(function(){
    //so I start with an empty array
    var filters [];
    //when a link is clicked I want to add it to the array..
    $('li a', context).click(function(e){
        //so I get the value held in the data-event attribute of the clicked item example: "john"
        newFilter = $(this).attr('data-event');
        //this is where I get stuck, I want to test to see if the string I now have
        //in 'newFilter' is in the array already or not.. if it is in the array I
        //want to remove it, but if it doesnt exist in the array i want to add it..
        if(jQuery.inArray(newFilter, filters){
            //add to array
        } else {
           //remove from array
        };
    e.preventDefault();
    });
});
jqueryarraysfilter
17
Iamsamstimpson

$ .inArray () renvoie l'index de l'élément s'il est trouvé, et -1 sinon (tout comme indexOf () fait, lorsqu'il est pris en charge). Par conséquent, vous pouvez écrire quelque chose comme:

var found = jQuery.inArray(newFilter, filters);
if (found >= 0) {
    // Element was found, remove it.
    filters.splice(found, 1);
} else {
    // Element was not found, add it.
    filters.Push(newFilter);
}
45
Frédéric Hamidi

Je peux me tromper, mais je crois que c'est aussi simple que d'utiliser du javascript basique: [.Push , .splice]

if($.inArray(newFilter, filters)<0) {
    //add to array
    filters.Push(newFilter); // <- basic JS see Array.Push
} 
else {
    //remove from array
    filters.splice($.inArray(newFilter, filters),1); // <- basic JS see Array.splice
};

Bien sûr, si vous voulez vraiment le simplifier, vous pouvez supprimer certaines lignes et le réduire au codage en ligne.

0 > $.inArray(newFilter,filters) ? filters.Push(newFilter) : filters.splice($.inArray(newFilter,filters),1);

Pour ABSOLUTE pure JS:

var i; (i=filters.indexOf(newFilter))<0?filters.Push(newFilter):filters.splice(i,1);

En panne:

var i;  //  Basic variable to be used if index of item exist
//  The following is simply an opening to an inline if statement.
//  It's wrapped in () because we want `i` to equal the index of the item, if found, not what's to follow the `?`.
//  So this says "If i = an index value less than 0".
(i=filters.indexOf(newFilter)) < 0 ?
    //  If it was not found, the index will be -1, thus Push new item onto array
    filters.Push(newFilter) : 
        //  If found, i will be the index of the item found, so we can now use it to simply splice that item from the array.
        filters.splice(i,1);
7
SpYk3HH

Vous pouvez utiliser la fonction lodash "xor":

_.xor([2, 1], [2, 3]);
// => [1, 3]

Si vous n’avez pas de tableau comme second paramètre, vous pouvez simplement envelopper la variable dans un tableau

var variableToInsertOrRemove = 2;
_.xor([2, 1], [variableToInsertOrRemove]);
// => [1]
_.xor([1, 3], [variableToInsertOrRemove]);
// => [1, 2, 3]

Voici la doc: https://lodash.com/docs/4.16.4#xor

4
David Ginanni

À moins que vous n'ayez une raison spécifique d'utiliser des tableaux, je suggérerais d'utiliser un objet à la place.

$(document).ready(function(){
    //so I start with an empty array
    var filters {};
    //when a link is clicked I want to add it to the array..
    $('li a', context).click(function(e){
        //so I get the value held in the data-event attribute of the clicked item example: "john"
        newFilter = $(this).attr('data-event');
        //this is where I get stuck, I want to test to see if the string I now have
        //in 'newFilter' is in the array already or not.. if it is in the array I
        //want to remove it, but if it doesnt exist in the array i want to add it..
        if (filters.hasOwnProperty(newFilter)) {
           // remove from object
           delete filters[newFilter];
        } else {
           //add to object
           filters[newFilter] = 'FOO'; // some sentinel since we don't care about value 
        };
    e.preventDefault();
    });
});
1
jbabey

Quelque chose comme ça?

var filters = [];
// ...
var newFilter = '...';
if(-1 !== (idx = jQuery.inArray(newFilter, filters))) {
   // remove
   filters.splice(idx, 1);
} else {
   // add
   filters.Push(newFilter);
}
0
GiDo

Une autre façon que j'ai trouvée:

Retirer:

filters = jQuery.grep(filters, function(value) {
  return value != newFilter;
});

ajouter:

filters.Push(newFilter)
0
Ofir Baruch