Ajout d'une classe à un psuedo: avant l'élément

Question

J'essaie d'ajouter une image dans mon élément :before avec une fonction change. Ce que je fais est d'enrouler une étiquette autour du #signupCheck pour travailler comme une case à cocher. J'ai ajouté une instruction console.log à mon événement de changement et il ne fonctionne pas, donc je ne suis pas sûr de ce que je fais de mal.

Est-ce que quelqu'un voit quelque chose qui pourrait causer que cela ne fonctionne pas?

$('#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

Deux choses:

1. Vous lient de manière incorrecte le gestionnaire d'événements à l'étiquette #proposal-check-wrap au lieu de la case à cocher #proposal-check.
2. Les pseudo-éléments ne peuvent pas avoir d'attributs.

L'élément d'origine peut ont une classe, donc la classe à fixer cet élément à la place, et le style de son pseudo-élément en fonction de la classe. En d'autres termes, au lieu de #signupCheck:before.active, appliquer la règle à #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">

Vos deux :before règles ont des dimensions inégales par la voie. Juste une note au cas où c'est une erreur.

Answer 2

Un couple de choses.

1. Votre programme d'écoute de modification doit être sur l'entrée elle-même.
2. Vous ne pouvez pas manipuler un élément psuedo de cette manière. Au lieu de cela, vous devez ajouter la classe à l'élément (pas de pseudo mentionné dedans) et le styler en conséquence.

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; 
}