Как я могу условно установить класс div в jQuery?

Question

CSS:

   #outer{
    background-color:#FFFF99;            
   }

   #inner1{
      float : left;
   }

    .New1{
      width: 62%; 
    }

   .New2{
     width: 72% 
   }

---

Мне нужно иметь возможность изменить класс div после условия в обработчике событий.

Логика:

         case '1': <div id="outer" class="New1"> 
                   </div>
         case '2': <div id="outer" class="New2">
                    </div>

---

Для этого я написал следующий jQuery:

$("#generate").click(function(){
     // here I wrote code for case '1'
     $("#outer").addClass("New1");
});
$("#choice").click(function(){
     // here I wrote code for case '2'
     $("#outer").addClass("New2");
}); 

• Нужно ли удалять класс, который я ранее добавил к нему?

• Мне нужно переключаться между двумя состояниями.

Как я могу это сделать?

Answer 1

$("#generate").toggle(function() {
    $("#outer").removeClass("New2").addClass("New1");
}, function() {
    $("#outer").removeClass("New1").addClass("New2");
});

или

$("#generate").click(function() {
    $("#outer").removeClass("New2").addClass("New1");
});
$("#choice").click(function() {
    $("#outer").removeClass("New1").addClass("New2");
});