jquery - 使用 jquery 添加和删除属性

Question

这是我的按钮:

<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>

我的问题是，当我单击“删除”按钮时一切正常，ID 将被删除，但是单击“删除”按钮后，当我单击“添加”按钮时，代码不起作用并且没有任何反应!

我需要使用此代码添加和删除 ID，但我只能删除 ID，而无法添加 ID。我需要一些帮助，还有一件事，

当按钮处于事件状态时，如何为按钮添加 CSS 样式？像这样，当我单击“删除”按钮时，我想将按钮背景更改为红色。我需要添加 css 类，以便在按钮处于事件状态时添加和删除!我不知道怎么办!

Answer 1

这是因为您删除了 id这就是你找到元素的方式。这行代码试图添加 id="page_navigation1"到带有 id 的元素命名page_navigation1 ，但它不存在(因为您删除了该属性):

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

演示:

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

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

还有:

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

哪里red-class是:

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