使用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"到带有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;
}

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");
});