用jQuery添加和删除属性

这是我的按钮:

<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,但是我只能删除IF,而不能添加ID。 为此,我需要一些帮助,还有一件事,

当按钮处于活动状态时,如何为按钮添加CSS样式?这样,当我单击“删除”按钮时,我想将按钮背景更改为红色。 当按钮处于活动状态时,我需要添加css类以进行添加和删除! 我不知道怎么做!

Alireza asked 2020-02-17T10:15:00Z
4个解决方案
82 votes

这是因为您已删除red-class,这是您查找元素的方式。 此行代码尝试将id="page_navigation1"添加到名为id id的元素中,但是它不存在(因为您删除了该属性):

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

演示:jsFiddle

如果要添加和删除使red-class红色使用的类,请执行以下操作:

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

和:

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

red-class其中:

.red-class {
    background-color: red;
}
ThinkingStiff answered 2020-02-17T10:15:33Z
27 votes

删除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");
    });     
});
Sean Vieira answered 2020-02-17T10:15:57Z
7 votes

首先,您要添加一个类,然后删除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>
Shafiqul Islam answered 2020-02-17T10:16:17Z
5 votes

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

var el = $("#page_navigation1");

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

$("#remove").click(function(){
  el.removeAttr("id");
});     
xdazz answered 2020-02-17T10:16:38Z
translate from https://stackoverflow.com:/questions/11489037/add-and-remove-attribute-with-jquery