チェ・ゲバムラの日記

脱犬の道を目指す男のブログ

【JS】ボタンをクリックするたびにクラスを付与したり消したりする

 

これだけ。

フラグ立てる必要もないので便利。

 

1.Toggleの場合

(function($) {
 $(function() {
  var $header = $('#top-head');
  // Toggle Button
  $('#nav-toggle').click(function(){
   $header.toggleClass('open');
  });
 });
})(jQuery);

 

 

2.click each

 $("span").click(function () {
$("li").each(function(){
$(this).toggleClass("example");
});
});

 

html

 <html>

<head>
<script src="/jquery/js/jquery.js"></script>
<script>
window.onload = (function(){try{

$("span").click(function () {
$("li").each(function(){
$(this).toggleClass("example");
});
});
}catch(e){}});</script>
<style>
ul { font-size:18px; margin:0; }
span { color:blue; text-decoration:underline; cursor:pointer; }
.example { font-style:italic; }
</style>
<style>html,body{border:0; margin:0; padding:0;}</style></head>
<body>
To do list: <span>(click here to change)</span>
<ul>
<li>Eat</li>
<li>Sleep</li>
<li>Be merry</li>
</ul>
</body>
</html>