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 类以添加和删除！我不知道怎么做！

score 85 · Accepted Answer

这是因为您已经删除了id查找元素的方式。这行代码试图添加id="page_navigation1"到具有idnamed的元素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;
}

score 29 · Accepted Answer

删除 ID“page_navigation”后，该元素不再具有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");
    });     
});

score 7 · Accepted Answer

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

score 5 · Accepted Answer

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

var el = $("#page_navigation1");

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

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

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

4 回答 4

Related

Reference