メディアクエリが600px未満の場合、jQueryで別のクラスを追加するにはどうすればよいですか？

Question

まあ私はクラス（.circle-checked）を追加するこれらのラベルImのonClickしかし、メディアのクエリが600pxより少ないならば、私はこのクラス（.circle-checked）しかし別のクラス（.circle-checked-blue）を追加したくありません。このコントロールをどうすればできますか？ここ

は、ノウハウのために使用してコードイムです：

$(window).load(function() { 
    $('input').change(function(){ 
    var $this = $(this), $div = $('label.ui-button.ui-widget.ui-state-default[for=' + $this.attr('id') + ']'); 
     if($this.is(':checked')) 
     { 
      $div.addClass('circle-checked'); 
     } 
     else 
     { 
      $div.removeClass('circle-checked'); 
     } 
    }).change(); 
}); 

おかげ

Answer 1

あなたはこのためwindow.matchMediaを試すことができます。

$(window).load(function() { 
    $('input').change(function(){ 
     var $this = $(this), $div = $('label.ui-button.ui-widget.ui-state-default[for=' + $this.attr('id') + ']'); 
      var classname='circle-checked'; 
      if (window.matchMedia('(max-width: 600px)').matches) { 
       classname='circle-checked-blue'; 
      } 

      if($this.is(':checked')) 
      { 
       $div.addClass(classname); 
      } 
      else 
      { 
       $div.removeClass(classname); 
      } 
     }).change(); 
}); 

Answer 2

$(window).load(function() { 
    $('input').change(function(){ 
     var $this = $(this), $div = $('label.ui-button.ui-widget.ui-state-default[for=' + $this.attr('id') + ']'); 

     var issm = $(window).width()=<600; 
     var classChecked= issm?'circle-checked-blue':'circle-checked'; 


      if($this.is(':checked')) 
      { 
       $div.addClass(classChecked); 
      } 
      else 
      { 
       $div.removeClass(classChecked); 
      } 
     }).change(); 
}); 

Answer 3

がうまくどうもありがとうございましたが、それは動作しません...窓からの幅を取得するためにjqueryの幅を使用してみてください！

メディアクエリが<である場合、600はまだ.circle-checkedですか？

●はチェックし ●はチェックインブルー

デスクトップバージョン、onClickのラベルにその広告●は確認されたクラスとそれが正常に動作します： 私はより良い説明してみましょう、私は2クラスの持っていますモバイル版の場合は< 600と認識していますが、.circle-checkedは追加しませんが、.circle-checked-blueを追加してください！

ありがとう、