2013-02-26 3 views
1

Я новичок в jQuery, но я уже невероятно впечатлен его силой. Вот мой вопрос:jquery if else statement hasClass addClass click

Я хочу

  • добавить class='dec' к #jf1, когда я нажимаю его, если он имеет class='undec'
  • добавить class='undec' к #jf1, когда я нажимаю его, если он имеет class='dec'

Вот что я имею - он не работает!

<script> 
$(document).ready(function(){ 
$(function() { 

    $('#jf1').click(function() { 

     if ('#jf1'.hasClass("undec")) { 
      $('#jf1').toggleClass("undec dec"); 
    } 
     else if ('#jf1'.hasClass("dec")) { 
      $('#jf1').toggleClass("dec undec"; 
    } 

    }); 

}); 
}); 
</script> 
+1

почему вы используете $ (документ) и $ (функцию) оба вместе? –

ответ

6

Есть несколько синтаксических ошибок в коде, ваш, если заявление должно быть:

if ($('#jf1').hasClass("undec")) { 

Также $(function(){}) представляет собой сокращенную версию $(document).ready(function(){}), вы не должны вкладывать их. toggleClass удаляет и добавляет классы, поэтому здесь нет необходимости использовать инструкцию if.

$(function() { 
    $('#jf1').click(function() { 
     // `this` refers to the clicked element 
     $(this).toggleClass("undec dec"); 
    }); 
}); 
+0

Эй, спасибо за быстрый ответ. Я согласен с тем, что .toggleClass идеально подходит для этого, но я хотел использовать оператор if/else, потому что, когда я нажимаю на элемент, я также хочу .show или .hide элемент на основе его CSS-класса на основе того, не «фильтр» имеет класс = 'dec' или class = 'undec' – user2110307

0

попробовать это: http://jsfiddle.net/YS5F5/

$(document).ready(function() { 
    $('#jf1').click(function() { 
     alert("hello"); 
     $('#jf1').toggleClass("undec"); 
     $('#jf1').toggleClass("dec"); 

    }); 
}); 

не нужна функция снова после JQuery (документ) .ready части