web-dev-qa-db-fra.com

Ajouter et supprimer un attribut avec jQuery

Ce sont mes boutons:

<button id="add">Add</button>
<button id="remove">Remove</button>

c'est mon code JavaScript:

<script type="text/javascript">
    $(document).ready(function(){   
        /*** Add attribute ***/
        $("#add").click(function(){
            $("#page_navigation1").attr("id","page_navigation1");
        });     
        /*** Remove attribute ***/
        $("#remove").click(function(){
            $("#page_navigation1").removeAttr("id");
        });     
    });
</script>

et voici mon code html:

<div id="page_navigation1">next</div>

Mon problème est, quand je clique sur le bouton Supprimer tout va bien et que l'identifiant 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!

J'ai besoin d'ajouter et de supprimer un ID avec ce code, mais je peux simplement supprimer un ID, je ne peux pas en ajouter. J'ai besoin d'aide pour cela, et encore une chose,

Comment puis-je ajouter un 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. J'ai besoin d'ajouter la classe CSS pour ajouter et supprimer lorsque les boutons sont actifs! et je ne sais pas comment!

jqueryattributes
47
Alireza

C'est parce que vous avez supprimé la id qui permet de trouver l'élément. Cette ligne de code tente d'ajouter id="page_navigation1" à un élément portant la id nommée page_navigation1, mais elle n'existe pas (car vous avez supprimé l'attribut):

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

Démo:  jsFiddle

Si vous souhaitez ajouter et supprimer une classe qui rend votre <div> rouge utiliser:

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

Et:

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

Où red-class est:

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

Une fois que vous supprimez l'ID "page_navigation", cet élément n'est plus a un ID 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");
    });     
});
26
Sean Vieira

D'abord, vous ajoutez une classe, puis supprimez l'id

<script type="text/javascript">
$(document).ready(function(){   
 $("#page_navigation1").addClass("page_navigation");        

 $("#add").click(function(){
        $(".page_navigation").attr("id","page_navigation1");
    });     
    $("#remove").click(function(){
        $(".page_navigation").removeAttr("id");
    });     
  });
</script>
6
Shafiqul Islam

Si vous voulez faire cela, vous devez d’abord le sauvegarder dans une variable. Donc, vous n'avez 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");
});
5
xdazz