I'm trying to create simple selection option for users when selecting a particular font style. If they click on a font div
, the background of that div
should change color.
The problem I'm having is that the first font div
works perfectly in changing color - however the other font div
s do not follow suit.
JSFiddle
HTML
<div class="fonts">
<div id="font" class="minecraft-evenings">
Hello
<p>Minecraft Evenings</p>
</div>
<div id="font" class="minecrafter">
Hello
<p>Minecrafter 3</p>
</div>
<div id="font" class="volter">
Hello
<p>Volter</p>
</div>
</div>
JavaScript/JQuery
$(document).ready(function() {
$('#font').click(function() {
$(this).css("background-color", "#000");
$('#font').not(this).css("background-color", "#f1f1f1");
});
});
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…