Добавить и удалить атрибут с помощью 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, я не могу добавить идентификатор. Мне нужна помощь для этого, и еще одна вещь,

Как я могу добавить стиль CSS для кнопки, когда кнопка активна? например, когда я нажимаю кнопку "Удалить" , я хочу, чтобы фон кнопки изменения был красным. Мне нужно добавить класс css для добавления и удаления, когда кнопки активны! и я не знаю, как!

Ответ 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;
}

Ответ 2

Как только вы удалите идентификатор "page_navigation", у этого элемента больше нет идентификатора, и он не может быть найден при попытке получить к нему второй доступ.

Решение заключается в кэшировании ссылки на элемент:

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

Ответ 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>

Ответ 4

Если вы хотите это сделать, сначала нужно сохранить его в переменной. Поэтому вам не нужно использовать id для запроса этого элемента каждый раз.

var el = $("#page_navigation1");

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

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