Jquery probleem, if else

**bert vanhees** · 28-04-2013, 11:55

Beste,

Ik ben aan het kijken om Jquery te leren maar zit met een klein probleem. Ik heb 2 input velden en wanneer je u focus op een input veld moet er een CSSclass verschijnen die ik heb aangemaakt in CSS. Echter als ik op de 2de input veld ga staan moet de focus op de eerste inputveld verwijderen en op de andere komen te staan.

Momenteel heb ik deze code:

Code:

  
  <style>
  .kader{border: 9px solid red;};
  </style>

</head>
<body>
  <p>
    <label for="naam">Naam</label> <br />
    <input type="text" name="naam" id="naam">
  </p>

  <p>
    <label for="achternaam">Achternaam</label> <br />
    <input type="text" name="achternaam" id="achternaam">
  </p>
  <div id=""></div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')</script>
  <script>
  $(document).ready(function(){

   

    $('input').on('focus', function(){
      if ($(this).addClass("kader"));
      else{
        $(this).removeClass("kader");
      }
    })

  });
    </script>
  </body>

Kan iemand mij hierbij helpen? :-)

**Joshua de Gier** · 28-04-2013, 12:14

Je doet geen goede if-else. De 1e voorwaarde lukt namelijk altijd. Wat je mist is de controle of het veld de class 'kader' heeft:

Code:

if( $(this).hasClass('kader') ) {
  $(this).removeClass('kader');
} else {
  $(this).addClass('kader');
}

Jquery probleem, if else