web-dev-qa-db-ja.com

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を追加および削除する必要がありますが、IDを削除するだけで、IDを追加することはできません。これにはいくつかの助けが必要です。

ボタンがアクティブなときにボタンにCSSスタイルを追加するにはどうすればよいですか？このように、[削除]ボタンをクリックすると、ボタンの背景を赤に変更します。ボタンがアクティブなときに追加と削除のためにcssクラスを追加する必要があります！そして、私は方法がわからない！

jqueryattributes
47
Alireza

これは、idを削除したためです。これが要素の検索方法です。このコード行は、id="page_navigation1"という名前のidを持つ要素にpage_navigation1を追加しようとしていますが、存在しません（属性を削除したため）。

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

デモ： jsFiddle

<div> redを使用するクラスを追加および削除する場合：

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

そして：

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

red-classは次のとおりです。

.red-class {
    background-color: red;
}
81
ThinkingStiff

ID "page_navigation"を削除すると、その要素はもはやhas IDではなくなり、2回目にアクセスしようとしても見つかりません。

解決策は、要素への参照をキャッシュすることです：

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

最初にクラスを追加してから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>
6
Shafiqul Islam

これを行うには、最初に変数に保存する必要があります。したがって、毎回この要素を照会するためにidを使用する必要はありません。

var el = $("#page_navigation1");

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

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