Ajouter et supprimer un atsortingbut avec jquery

Ce sont mes boutons:

  

c’est mon code JavaScript:

  $(document).ready(function(){ /*** Add atsortingbute ***/ $("#add").click(function(){ $("#page_navigation1").attr("id","page_navigation1"); }); /*** Remove atsortingbute ***/ $("#remove").click(function(){ $("#page_navigation1").removeAttr("id"); }); });  

et ceci est mon code HTML:

  

Mon problème est, quand je clique sur le bouton Supprimer, tout va bien et l’ID sera supprimé, mais après avoir cliqué sur le bouton Supprimer, lorsque je clique sur le bouton Ajouter, le code ne fonctionne pas et rien ne se passe!

Je dois append et supprimer l’ID avec ce code, mais je peux simplement supprimer l’ID, je ne peux pas append d’identifiant. J’ai besoin d’aide pour cela, et encore une chose,

Comment puis-je append le style CSS pour le bouton lorsque le bouton est actif? comme ça, quand je clique sur le bouton Supprimer, je veux changer l’arrière-plan du bouton en rouge. Je dois append la classe css pour append et supprimer quand les boutons sont actifs! et je ne sais pas comment!

C’est parce que vous avez supprimé l’ id qui correspond à la manière dont vous trouvez l’élément. Cette ligne de code essaie d’append id="page_navigation1" à un élément avec l’ id nommé page_navigation1 , mais il n’existe pas (car vous avez supprimé l’atsortingbut):

 $("#page_navigation1").attr("id","page_navigation1"); 

Démo: jsfiddle

Si vous voulez append et supprimer une classe qui fait que votre

red utilise:

 $( '#page_navigation1' ).addClass( 'red-class' ); 

Et:

 $( '#page_navigation1' ).removeClass( 'red-class' ); 

red-class est:

 .red-class { background-color: red; } 

Une fois l’ID “page_navigation” supprimé, cet élément n’a plus d’identifiant et ne peut donc pas être trouvé lorsque vous tentez d’y accéder une seconde fois.

La solution consiste à mettre en cache une référence à l’élément:

 $(document).ready(function(){ // This reference remains available to the following functions // even when the ID is removed. var page_navigation = $("#page_navigation1"); $("#add").click(function(){ page_navigation.attr("id","page_navigation1"); }); $("#remove").click(function(){ page_navigation.removeAttr("id"); }); }); 

Si vous voulez faire cela, vous devez d’abord l’enregistrer dans une variable. Vous n’avez donc pas besoin d’utiliser id pour interroger cet élément à chaque fois.

 var el = $("#page_navigation1"); $("#add").click(function(){ el.attr("id","page_navigation1"); }); $("#remove").click(function(){ el.removeAttr("id"); }); 

D’abord vous ajoutez une classe puis supprimez l’id