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');

});
0
user3897842 14 sierpień 2014, 05:00

4 odpowiedzi

Najlepsza odpowiedź

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ł.

3
hjpotter92 14 sierpień 2014, 01:09

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');
0
chaddy81 14 sierpień 2014, 01:06

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();

JSFiddle Demo

0
imbondbaby 14 sierpień 2014, 01:10

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.

0
Yerko Palma 14 sierpień 2014, 01:11