psuedo：before要素にクラスを追加する

Question

:before要素内にchange関数を使用して画像を追加しようとしています。私がやっているのは、#signupCheckのラベルをラップしてチェックボックス入力として機能させることです。私は変更イベントにconsole.logステートメントを追加しました。実行されていないので、間違っていることがわかりません。

誰かがこれが動作しない原因になる可能性のあるものは誰も見ていますか？

$('#proposal-check-wrap').on('change', function() { 
 
    $('#signupCheck:before').addClass('active'); 
 
    console.log("change worked"); 
 
});

#proposal-check { 
 
\t display: none; 
 
} 
 
#signupCheck:before { 
 
\t width: 40px; 
 
\t height: 40px; 
 
\t border: 1px solid #858585; 
 
\t background: #333333; 
 
\t content: ''; 
 
\t float: left; 
 
\t display: block; 
 
\t margin: 0 10px 0 2.4%; 
 
} 
 
#signupCheck:before.active { 
 
\t background-image: url("https://lh3.ggpht.com/OHBD2vcwNk80-q1P84NDmYjnwNmD8R-FjJagxvfcZhGHeRx6dNFX12afBL4e88nCra0=w300"); 
 
\t background-size: 30px 30px; 
 
    background-repeat: no-repeat; 
 
\t background-position: center; 
 
\t height: 30px; 
 
\t width: 30px; 
 
} 
 
#signupCheck { 
 
\t color: #858585; 
 
\t font-size: 1.3rem; 
 
\t cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<label for="proposal-check" id="proposal-check-wrap"> 
 
    <p id="signupCheck">Sign me up</p> 
 
</label> 
 
<input type="checkbox" id="proposal-check">

Answer 1

2つのこと：

1. あなたは間違ってラベル#proposal-check-wrap代わりのチェックボックス#proposal-checkにイベントハンドラをバインドしています。
2. 擬似要素は属性を持つことができません。

元の要素はは、クラスを持っているので、代わりにその要素にクラスを添付し、クラスに基づいてその擬似要素のスタイルを設定することができます。言い換えれば、代わりの#signupCheck:before.activeでは、#signupCheck.active:beforeにルールを適用します。

$('#proposal-check').on('change', function() { 
 
    $('#signupCheck').addClass('active'); 
 
    console.log("change worked"); 
 
});

#proposal-check { 
 
\t display: none; 
 
} 
 
#signupCheck:before { 
 
\t width: 40px; 
 
\t height: 40px; 
 
\t border: 1px solid #858585; 
 
\t background: #333333; 
 
\t content: ''; 
 
\t float: left; 
 
\t display: block; 
 
\t margin: 0 10px 0 2.4%; 
 
} 
 
#signupCheck.active:before { 
 
\t background-image: url("https://lh3.ggpht.com/OHBD2vcwNk80-q1P84NDmYjnwNmD8R-FjJagxvfcZhGHeRx6dNFX12afBL4e88nCra0=w300"); 
 
\t background-size: 30px 30px; 
 
    background-repeat: no-repeat; 
 
\t background-position: center; 
 
\t height: 30px; 
 
\t width: 30px; 
 
} 
 
#signupCheck { 
 
\t color: #858585; 
 
\t font-size: 1.3rem; 
 
\t cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<label for="proposal-check" id="proposal-check-wrap"> 
 
    <p id="signupCheck">Sign me up</p> 
 
</label> 
 
<input type="checkbox" id="proposal-check">

あなたの2つの:beforeルールは仕方によって不平等な寸法を有しています。これが間違いである場合のためのちょうどメモ。

Answer 2

いくつかのことがあります。

1. 変更リスナーは入力そのものにする必要があります。
2. このような擬似要素は操作できません。代わりに、そのクラスを要素に追加する必要があります（そこに記載されている擬似体はありません）。

JS fiddle

JS

$('#proposal-check').on('change', function() { 
    $('#signupCheck').addClass('active'); 
}); 

CSS

#signupCheck.active:before { 
    background-image: url("https://lh3.ggpht.com/OHBD2vcwNk80-q1P84NDmYjnwNmD8R-FjJagxvfcZhGHeRx6dNFX12afBL4e88nCra0=w300"); 
    background-size: 30px 30px; 
    background-repeat: no-repeat; 
    background-position: center; 
    height: 30px; 
    width: 30px; 
}