JQuery .addClass（）はJQueryで定義されたスタイルを適用していません

Question

これはかなり簡単な質問ですが、JQueryプラグインを作成しようとしています（JQueryのみを使用したい）。問題は、.active div（JQuery経由）に設定されたスタイルがあり、<div>をクリックすると、activeというクラスが与えられました。私は開発者ツールをチェックしたのでこれを知っていますが、スタイルは与えられていません。クラスを<div>にハードコーディングしてみましたが、うまくいきました。私はまた、JQueryの代わりにCSSでスタイルをハードコーディングしてみましたが、やり直しました。 <div>がクリックされたときにスタイルが適用されるように、<div>のJQuery-onclickを更新する方法はありますか？

$('div.active').css({ 
 
    'border-style':'solid', 
 
\t 'border-width':'1px', 
 
\t 'border-color':'black', 
 
}); 
 
$('div').on('click',function(){ 
 
    $('div').removeClass('active'); 
 
    $(this).addClass('active'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="div1">div 1</div> 
 
<div class="div2">div 2</div> 
 
<div class="div3">div 3</div> 
 
<div class="div4">div 4</div>

また

JSFiddle

、これは私のために働いていない理由を説明することができますか？

おかげ

Answer 1

$('div.active')は、その実行の正確な時間に、それらにクラス.activeを持つすべての<div>要素を選択します。これは、ページがロードされたときに、ページがロードされたときにクラス.activeを持つ要素がないことを意味します。したがって、要素はスタイルされません。前の選択と一致する要素がある場合、プロパティは自動的に後で追加されません。

ページにスタイルを追加する場合は、<style>属性をDOMに追加する必要があります。

$('head').append('<style>div.active { border: 1px solid black; }</style>'); 

ただし、プログラムでスタイルシートを追加することはできません。スタイルシートファイルにスタイルを追加して、クラスを切り替えてプログラム的に変更を加えてみてください。ここ

---

例を働いている：

$('head').append('<style>div.active { border: 1px solid black; }</style>'); 
 
$('div').on('click',function(){ 
 
    $('div').removeClass('active'); 
 
    $(this).addClass('active'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="div1">div 1</div> 
 
<div class="div2">div 2</div> 
 
<div class="div3">div 3</div> 
 
<div class="div4">div 4</div>

Answer 2

$('div.active').css({ 
    'border-style':'solid', 
    'border-width':'1px', 
    'border-color':'black', 
}); 

上記ロジックはその時点-at、activeクラスを有する任意のdiv要素にインラインスタイルを置きます - 、DOMの中で。

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

上記のロジックは、要素のアクティブなクラスを単純に移動します。インラインスタイルは自動的には移動しません。他の人とは別に

Answer 3

説明、CSSは別々に働くだろう入れ、

div.active { 
    border: 1px solid red; 
} 

div { 
    border: 1px solid green; 
} 

あなたの質問のための作業のデモはここにある： js fiddle