用jquery添加和删除属性

这是我的button:

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

这是我的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> 

这是我的HTML代码:

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

我的问题是,当我点击删除button一切都很好,ID将被删除,但点击删除button后,当我点击添加button,代码不工作,没有任何反应!

我需要添加和删除ID代码,但我可以删除ID,我不能添加ID。 我需要一些帮助,还有一件事,

当button处于活动状态时,如何为button添加CSS样式? 像这样,当我点击删除button,我想要改变button背景为红色。 我需要添加css类来添加和删除当button处于活动状态! 我不知道如何!

这是因为你已经删除了你是如何find元素的id 。 这行代码尝试将id="page_navigation1"添加到名为page_navigation1id元素,但它不存在(因为您删除了该属性):

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

演示: 的jsfiddle

如果你想添加和删除一个使你的<div>红色使用的类:

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

和:

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

red-class是:

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

一旦删除ID“page_navigation”,该元素不再具有 ID,因此当您尝试再次访问该元素时无法find该ID。

解决scheme是caching对元素的引用:

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

首先你要添加一个类然后删除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> 

如果你想这样做,你需要先把它保存在一个variables中。 所以你不需要每次都使用id来查询这个元素。

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