使用 jquery 添加和删除属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11489037/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add and remove attribute with jquery
提问by Alireza
This is my buttons:
这是我的按钮：
<button id="add">Add</button>
<button id="remove">Remove</button>
this is my JavaScript 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>
and this is my html code:
这是我的 html 代码：
<div id="page_navigation1">next</div>
My problem is, when I click on Remove button everything is fine and ID will be removed, but after click on remove button, when I click on Add button, code is not working and nothing happens!
我的问题是，当我单击“删除”按钮时一切正常，ID 将被删除，但是在单击“删除”按钮后，当我单击“添加”按钮时，代码不起作用，什么也没有发生！
I need to add and remove ID whith this code, but I can just Remove ID, I cant add ID. I need some help for this, and one more thing,
我需要使用此代码添加和删除 ID，但我只能删除 ID，无法添加 ID。我需要一些帮助，还有一件事，
How I can add CSS style for button when button is Active? like this, when I click on Remove button, I want change button background to red. I need to add css class for add and remove when buttons are active! and I dont know how!
当按钮处于活动状态时，如何为按钮添加 CSS 样式？像这样，当我单击“删除”按钮时，我想将按钮背景更改为红色。我需要添加 css 类以在按钮处于活动状态时添加和删除！我不知道怎么做！
回答by ThinkingStiff
It's because you've removed the idwhich is how you're finding the element. This line of code is trying to add id="page_navigation1"to an element with the idnamed page_navigation1, but it doesn't exist (because you deleted the attribute):
这是因为您已经删除了id查找元素的方式。这行代码试图添加id="page_navigation1"到具有idnamed的元素page_navigation1，但它不存在（因为您删除了该属性）：
$("#page_navigation1").attr("id","page_navigation1");
Demo:
演示：
If you want to add and remove a class that makes your <div>red use:
如果要添加和删除使您的<div>红色使用的类：
$( '#page_navigation1' ).addClass( 'red-class' );
And:
和：
$( '#page_navigation1' ).removeClass( 'red-class' );
Where red-classis:
在哪里red-class：
.red-class {
background-color: red;
}
回答by Sean Vieira
Once you remove the ID "page_navigation" that element no longer hasan ID and so cannot be found when you attempt to access it a second time.
删除 ID“page_navigation”后，该元素不再具有ID，因此在您尝试第二次访问时无法找到该元素。
The solution is to cache a reference to the element:
解决方案是缓存对元素的引用：
$(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");
});
});
回答by Shafiqul Islam
First you to add a class then remove 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>
回答by xdazz
If you want to do this, you need to save it in a variable first. So you don't need to use id to query this element every time.
如果你想这样做，你需要先把它保存在一个变量中。所以你不需要每次都使用 id 来查询这个元素。
var el = $("#page_navigation1");
$("#add").click(function(){
el.attr("id","page_navigation1");
});
$("#remove").click(function(){
el.removeAttr("id");
});
