使用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的{​​{1}}的元素中，但它不存在（因为您删除了该属性）：

page_navigation1

演示：

如果您要添加和删除使$("#page_navigation1").attr("id","page_navigation1"); 红色使用的类：

<div>

和

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

$( '#page_navigation1' ).removeClass( 'red-class' ); 的位置：

red-class

Answer 2

删除ID“page_navigation”后，该元素不再具有 ID，因此当您再次尝试访问该ID时无法找到它。

解决方案是缓存对元素的引用：

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

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

Answer 4

如果要执行此操作，则需要先将其保存在变量中。因此，您不需要每次都使用id来查询此元素。

var el = $("#page_navigation1");

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

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