0
votes

Basculer la classe active sur le bouton clic

Dans ce code dans lequel de nouveaux ensembles de .OPTIONS code> sont créés à tous les clics de .clone code>, je veux pouvoir ajouter le fichier > Classe sur le bouton code> cliqué sur chaque élément et supprimez ensuite la classe Focus CODE> de tous les boutons non classés. Je suis bloqué à la suppression de la classe code> de la classe code> à tous les boutons non cliqués.

Notez que le marquage HTML et JQuery doit rester identique à celui d'une fonction plus grande sur le site . p>

p>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn--new">Clone</button>
<div id="s_list">
  <div class="post__item studio__item" action="" id="s_item">
    <div class="options">
      <button type="button" class="button" data-type="studio">Dog</button>
      <button type="button" class="button" data-type="studio">Cat</button>
      <button type="button" class="button" data-type="studio">Bird</button>
    </div>
  </div>
</div>

jquery

0 commentaires

3 Réponses :

1
votes

Pour y parvenir, vous devez simplement appeler removeeclass ('COCTE') CODE> Pour le supprimer de tous les éléments précédents lorsque vous définissez la classe sur le dernier élément cliqué.

Notez également que vous pouvez Simplifiez et séchez votre code en utilisant des classes communes au lieu d'attributs code> ID code> généré par exécution (qui est généralement considéré comme un anti-motif) et également en utilisant des gestionnaires d'événements délégués. Essayez ceci: p>

p>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="clone">Clone</button>

<div id="list">
  <div class="item">
    <div class="options">
      <div class="category__item">
        <div class="input--studio">
          <button type="button" class="button" value="blue" data-filter="blue" data-rel="blue" data-type="item" data-color="blue">Blue</button>
        </div>
      </div>
      <div class="category__item">
        <div class="input--studio">
          <button type="button" class="button" value="red" data-filter="red" data-rel="red" data-type="item" data-color="red">Red</button>
        </div>
      </div>
    </div>
  </div>
</div>

1 commentaires

J'aurais dû mentionner que le code est un extrait d'une fonction plus grande et plus intégrée et que le balisage devrait rester la même étant donné la structure sur site.

1
votes

Vous voulez dire comme ça?

Démo mise à jour: https://jsfiddle.net/nd1owcmk/
Sans modifier aucun de votre code, ajoutez simplement un ensemble de script, qui prendra la classe de mise au point de la touche Un-clic. xxx

jQuery xxx

2 commentaires

@ Yeyene Le bouton Le concentré doit s'appliquer à chaque ensemble de boutons sous .OPTIONS . Donc, chacun aura le focus appliqué à l'un des boutons à travers la fonction aléatoire, puis de l'avoir supprimé lorsque l'un des autres boutons est cliqué dans la même liste.


                                                
                                                                                            
                                                    Oh, je n'étais pas clair ce que tu voulais. Vient de mettre à jour la réponse pour répondre à votre exigence, vérifiez à nouveau.


                        
                                            
                            
                                
                                    0
 votes
                                
                            
                            
                                
                                     dans la fonction .Ready  code> Je dois obtenir le nombre de l'élément de déclenchement puis je l'ai stocké dans un  localStorage  code>. Utilisation de cet élément  localStorage  code> avec la condition si j'ai supprimé la mise au point. 
 J'espère que cela vous aidera.  P> 
  p> 


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn--new" data-clone='true'>Clone</button>
<div id="s_list">
  <div class="post__item studio__item" action="" id="s_item">
    <div class="options">
      <button type="button" class="button" data-type="studio">Dog</button>
      <button type="button" class="button" data-type="studio">Cat</button>
      <button type="button" class="button" data-type="studio">Bird</button>
    </div>
  </div>
</div>

                                

                                                                    
                                    
                                    
                                        0 commentaires

Basculer la classe active sur le bouton clic

Démo mise à jour: https://jsfiddle.net/nd1owcmk/ Sans modifier aucun de votre code, ajoutez simplement un ensemble de script, qui prendra la classe de mise au point de la touche Un-clic. xxx

jQuery xxx

Démo mise à jour: https://jsfiddle.net/nd1owcmk/
Sans modifier aucun de votre code, ajoutez simplement un ensemble de script, qui prendra la classe de mise au point de la touche Un-clic. xxx