如果媒體查詢小於600px，如何使用jQuery添加另一個類？

那麼我已經列出了一些標籤，onClick這些標籤我添加一個類（.circle-checked），但如果媒體查詢小於600px那麼我不想被添加這個類（.circle-checked），但另一個類（.circle-checked-blue）。我怎樣才能做到這一點！？如果媒體查詢小於600px，如何使用jQuery添加另一個類？

這裏是使用專門的代碼IM：

$(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(); 
});

感謝

來源

2017-08-03 GMedija

不，你寧願不要那樣;至少如果這只是爲了造型的目的。你想要的是在你的樣式表中創建規則，使用不同的屏幕大小使用不同的單一類來使用媒體查詢格式化元素。 – CBroe

並且在類名中使用_colors_是非常糟糕的。如果在某個時候有人認爲這不應該是藍色的，而是綠色的 - 那麼你必須在項目中全部轉換類名稱，或者有一個名字中仍然有「藍色」的類，但實際上使用綠色作爲一種顏色。你應該根據_meaning_（目前這個元素是什麼_state_，你想給它一個特定的顏色？）選擇類，而不是當前所需的格式。 – CBroe

不要爲基於屏幕寬度的樣式/顏色添加/刪除類 - 而是在您的CSS中使用'@ media'，例如：'.circle {color：red; } @media（max-width：600px）{.circle {color：blue; }}' –

您可以嘗試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(); 
});

來源

2017-08-03 12:53:18

使用jQuery寬度來從窗口寬度嘗試...

$(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(); 
});

來源

2017-08-03 12:54:58

也非常感謝你，但它不工作！

當媒體查詢是< 600它仍然讀取.circle-checked ??? 讓我嘗試更好地解釋，我有2類的：

.circle覈對和 .circle覈對藍色

桌面版本的onClick標籤上的廣告.circle覈對類，它工作正常，但知道在移動版本ex < 600不添加.circle-checked，但添加.circle-checked-blue！

謝謝，

來源

2017-08-03 13:32:36 GMedija

如果媒體查詢小於600px，如何使用jQuery添加另一個類？

回答

相關問題