0
votes

jquery bascule entre les ID en fonction de l'attribut d'élément

j'ai ce

$(".picker").click(function(e) {
    var imgID = $(this).attr("data-imgID");
    $('body').addClass('picker-' + imgID);
});

<span class="taPicker" data-imgID="0"></span>
<span class="taPicker" data-imgID="1"></span>
<span class="taPicker" data-imgID="2"></span>

je veux basculer entre les classes génériques sur l'élément body, par exemple si vous cliquez sur .picker je veux ajouter une classe unique à l'élément body en fonction des données -imgID attribut

Mais, comment puis-je éviter les duplications? par exemple, si vous cliquez sur un autre .picker, je veux supprimer la classe précédente et en ajouter une nouvelle

javascript jquery

4 commentaires

Utilisez la fonction remove class avec un sélecteur partiel afin de supprimer toutes les classes commençant par picker- avant d'ajouter la nouvelle. Voir stackoverflow.com/questions/ 41832255 /…

Est-ce que cela répond à votre question? jQuery removeClass wildcard

@GillesC ne pense pas que vous pouvez utiliser un caractère générique avec .removeClass - le lien que vous avez fourni est pour un sélecteur, pas un argument pour removeClass - vous pouvez cependant utiliser une fonction comme indiqué ici: < a href = "https://stackoverflow.com/questions/2644299/jquery-removeclass-wildcard"> jQuery removeClass wildcard (le principe est donc le même)

@ Freedomn-m Oui, je ne peux pas utiliser de joker, je n'ai pas utilisé jQuery depuis plus de 10 ans, donc je devrais d'abord vérifier la documentation. Mais il ne prend pas seulement la fonction non plus, il peut également prendre une liste de classes sous forme de chaîne ou de tableau.

4 Réponses :

3
votes

Dans votre cas, vous pouvez faire quelque chose comme ceci:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="taPicker" data-imgID="0">click 0</span>
<span class="taPicker" data-imgID="1">click 1</span>
<span class="taPicker" data-imgID="2">click 2</span>

body.picker-0 {
  background-color: pink;
}

body.picker-1 {
  background-color: red;
}

body.picker-2 {
  background-color: blue;
}

var selectedClass = null;
$(".taPicker").click(function(e) {
  var imgID = $(this).attr("data-imgID");
  $('body').addClass('picker-' + imgID);
  if (selectedClass != null) {
    $('body').removeClass(selectedClass);
  }
  selectedClass = 'picker-' + imgID;
});

Voici un violon

2 commentaires

Juste pour signaler, le gestionnaire de clics devra être défini sur .taPicker , sinon cela ne fonctionnera pas.

Converti en extrait de code, pas besoin de violon

0
votes

Vous pouvez capturer la (les) classe (s) d'origine de body dans une variable prête pour le DOM puis utiliser .removeClass () avant de rajouter la classe d'origine plus le un basé sur l'élément cliqué.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="original">
<span class="taPicker" data-imgID="0">0</span>
<span class="taPicker" data-imgID="1">1</span>
<span class="taPicker" data-imgID="2">2</span>
</body>

$(".taPicker").click(function(e) {
    var imgID = $(this).attr("data-imgID");
    var picker = $('body').attr("class").match(/picker-\d+/g) || [];
    $('body').removeClass(picker).addClass('picker-' + imgID);
});

1 commentaires

Il pourrait y avoir un cas où une autre classe de corps est ajoutée ailleurs, puis après le prochain clic sur sélecteur qui serait ignoré

1
votes

Cela peut être fait sans ajouter de variable globale supplémentaire

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="taPicker" data-imgID="0">click 0</span>
<span class="taPicker" data-imgID="1">click 1</span>
<span class="taPicker" data-imgID="2">click 2</span>

body.picker-0 {
  background-color: pink;
}

body.picker-1 {
  background-color: red;
}

body.picker-2 {
  background-color: blue;
}

$(".taPicker").click(function(e) {
  var imgID = $(this).attr("data-imgID");
  $('body').removeClass(function() {
    return (this.className.match(/picker-./g) || []).join(' ');
  });
  $('body').addClass('picker-' + imgID);
});

0 commentaires

2
votes

Une autre approche serait de déterminer les classes qui doivent être supprimées à chaque mise à jour ultérieure. Pour cela, vous pouvez utiliser une fonction qui analyse les classes actuelles et supprime toute classe contenant sélecteur- , avant de définir la nouvelle classe.

Voici à quoi ressemblerait le code JS: p>

function getPickerClasses(index, className) {
  return className.split(' ').filter((classItem) => classItem.includes('picker-'));
}

$(".taPicker").click(function(e) {
    var imgID = $(this).attr("data-imgID");
    
    $('body').removeClass(getPickerClasses).addClass('picker-' + imgID);
});

De cette façon, avant de définir la nouvelle classe, l'ancienne est supprimée. Jetez un œil à ce violon pour voir le code en action: https://jsfiddle.net/0u24a1g3/

0 commentaires