web-dev-qa-db-ja.com

選択したdivにJQuery addclass、別のdivが選択されている場合はクラスを削除

私はフォームビルダーを作っています、例えば見出しdivの外観を変えたいです。クリックすると境界線が表示されますが、動的に生成された別のdivをクリックするとクラスが削除され、2番目にクリックされたdivが.activeクラスを取得する必要があります。

生成されたdivでこれを行うにはどうすればよいですか？

とにかく動作するものを見つけましたが、まだ別のdivが選択されている場合、以前のdiv.removeclassと選択されたdiv.addclassが必要です

これは動作します：

/* Add Class */
$(document).ready(function() {
    $( document ).on( 'click', '.HeadingDiv', function () { /* This '.HeadingDiv' could be anything, I need something dynamic here */
        $('.HeadingDiv').removeClass('active'); /* This '.HeadingDiv' could be anything, I need something dynamic here */
        $(this).addClass('active');
    });
});
jquerycssaddclassremoveclass
24
Auguste

この短くて効果的なものを探していますか？

http://jsfiddle.net/XBfMV/

$('div').on('click',function(){
  $('div').removeClass('active');
  $(this).addClass('active');
});

選択したdivに一般クラス「アクティブ」を追加するだけです。 divがクリックされたら、「アクティブ」クラスを削除し、クリックされたdivに追加します。

51
Caner Akdeniz

セレクターがすべてです。コードを次のように変更できます。

<div class="formbuilder">
    <div class="active">Heading</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

次に、このjavascriptを使用します。

$(document).ready(function () {
    $('.formbuilder div').on('click', function () {
        $('.formbuilder div').removeClass('active');
        $(this).addClass('active');
    });
});

動作中の例 jsfiddle

私が使用したセレクターについては、このAPIを参照してください。 http://api.jquery.com/descendant-selector/

3
guydog28

1行を使用して、divのクラスを追加および削除できます。最初にクラスを削除して、新しいクラスを追加してください。

$('div').on('click',function(){
  $('div').removeClass('active').addClass('active');     
});
2
Laxmi Priyam Dubey

このモードでは、クラスがアクティブなすべての要素を検索して削除できます

これを試して

$(document).ready(function() {
        $(this.attr('id')).click(function () {
           $(document).find('.active').removeClass('active');
           var DivId = $(this).attr('id');
           alert(DivId);
           $(this).addClass('active');
        });
  });
1
Alessandro Minoccheri

Divをリスト項目に変換する必要がありました。そうしないと、すべてのdivがそのクラスを取得し、生成されたものだけがそれを取得するはずです。 http://low-budgetwebservice.be/project/webbuilder.html で初心者向けスクールプロジェクトをフォローできます。提案はいつでも歓迎します:)。だからこれは私のために働いた：

            /* Add Class Heading*/
            $(document).ready(function() {
            $( document ).on( 'click', 'ul#items li', function () { 
            $('ul#items li').removeClass('active'); 
            $(this).addClass('active');
            });
            });
0
Auguste