用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_navigation1的id元素，但它不存在（因为您删除了该属性）：
$("#page_navigation1").attr("id","page_navigation1");
演示： 
如果你想添加和删除一个使你的<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"); });
