51

これは私のボタンです：

<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 を追加することはできません。これには助けが必要です、そしてもう1つ、

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

4

4 に答える 4

85

idこれは、要素を見つける方法である を削除したためです。このコード行は、名前id="page_navigation1"付きの要素に追加しようとしていますが、存在しません (属性を削除したため):idpage_navigation1

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

デモ： jsフィドル

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

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

と：

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

どこred-classにある：

.red-class {
    background-color: red;
}
于 2012-07-15T03:00:34.213 に答える
29

ID「page_navigation」を削除すると、その要素には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");
    });     
});
于 2012-07-15T03:00:59.707 に答える
7

最初にクラスを追加してから 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>
于 2014-06-05T17:06:47.477 に答える
5

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

var el = $("#page_navigation1");

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

$("#remove").click(function(){
  el.removeAttr("id");
});
于 2012-07-15T03:01:32.453 に答える