Añadir y eliminar atributo con jQuery

Question

Ésta es mis botones:

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

este es mi código 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> 

y este es mi código html:

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

Mi problema es decir, cuando hago clic en el botón Eliminar todo está bien y la ID se eliminará, pero luego de hacer clic en el botón Eliminar, cuando Hago clic en el botón Agregar, el código no funciona y ¡no pasa nada!

Necesito agregar y quitar la identificación con este código, pero puedo quitar la identificación, no puedo agregar la identificación. Necesito ayuda para esto, y una cosa más,

¿Cómo puedo agregar estilo CSS para el botón cuando el botón está activo? de esta manera, cuando hago clic en el botón Eliminar, quiero cambiar el fondo del botón a rojo. Necesito agregar la clase css para agregar y eliminar cuando los botones estén activos. ¡y no sé cómo!

Answer 1

Es porque ha eliminado el id que es la forma en que está buscando el elemento. Esta línea de código está tratando de añadir id="page_navigation1" a un elemento con el nombre idpage_navigation1, pero no existe (porque ha eliminado el atributo):

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

Demostración:

Si desea añadir y eliminar una clase que hace que su uso <div> roja:

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

Y:

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

Dónde red-class es:

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

Answer 2

vez que se quita el ID "page_navigation" ese elemento ya no tiene una identificación y por lo tanto no se puede encontrar cuando se intenta para acceder a ella por segunda vez.

La solución es almacenar en caché una referencia al elemento:

$(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"); 
    });  
}); 

Answer 3

Si quieres hacer esto, es necesario guardarlo en una variable en primer lugar. Por lo tanto, no necesita usar el id para consultar este elemento todo el tiempo.

var el = $("#page_navigation1"); 

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

$("#remove").click(function(){ 
    el.removeAttr("id"); 
});  

Answer 4

En primer lugar le permite añadir una clase a continuación, elimine el 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>