Próbuję przełączyć klasę na jedną z moich div, gdy kliknął na przycisk i z jakiegoś powodu klasa zostanie dodana do div, ale rzeczywiste właściwości CSS nie zdarzają się. Funkcja, którą próbuję uruchomić, jest na dole.
Oto mój kod:
HTML
<div class="mainPage">
<form class="homeButton" action="">
<input type="submit" value="Click to see who has had a worse day!">
</form>
</div>
<div class="textBox">
<h3>On (fill date), this person had a really terrible day.</h3>
<div class="badEvent">
<p>
</p>
</div>
<button>Close</button>
</div>
CSS
.mainPage {
background-color: #043D5D;
color: white;
text-align: center;
position: relative;
top: 0px;
left: 0px;
right: 0px;
h2 {
font-size: 4em;
}
p {
font-size: 2em;
}
form {
padding-bottom: 20px;
input {
width: 350px;
height: 50px;
border-radius: 10px;
font-size: .95em;
border: 1px solid #EB5055;
background-color: #EB5055;
cursor: pointer;
}
}
}
.replace {
background-color: red;
}
JS
$(".homeButton").on("click", function(event){
event.preventDefault();
$(".textBox").toggleClass('.replace');
});
4 odpowiedzi
Rzecz jest z oświadczeniem:
$(".textBox").toggleClass('.replace');
W rzeczywistości przełączasz klasę .replace i nie replace. . jest tylko do procesu zapytania. Nazwa klasy jest nadal replace. Zmień więc
$(".textBox").toggleClass('replace');
Oraz kod będzie działał.
Czy to cały stylowy arkusz lub odetkałeś go na zwięzłość? Jeśli nie zostanie odcięty, sprawdź ostatni wspornik, który wydaje się brakować po .replace i usunąć okres z ToggleClass.
$(".textBox").toggleClass('replace');
Zmień na to:
$(".homeButton").on("click", function(event){ // add event inside the brackets
event.preventDefault();
$(".textBox").toggleClass('replace'); // remove the . from ('.replace')
});
Zmień .replace do replace, ponieważ już przełączysz klasę.
W funkcji kliknij Dodaj parametr event, ponieważ używasz event.preventDefault();
Twoja klasa .homeButton musi znajdować się na swoim przycisku, a nie w formularzu. Ponadto, jeśli nie wysyłasz formularza, lepiej tylko użyć znacznika kotwicy lub znacznika przycisku bez formularza.