jQuery onClick：如何根據窗口大小切換不同的類？

我已經設置了這個代碼，以便點擊div。切換並刪除課程。現在我想在不同大小的窗口中添加不同的類。我寫了下面的代碼，但這段代碼不起作用。這裏是我的代碼：jQuery onClick：如何根據窗口大小切換不同的類？

$('.click').click(function() { 
 
\t var windowsize = $window.width(); 
 
\t  if (windowsize = 1920) { 
 
    $(".add").toggleClass("new920"); 
 
\t } 
 
}); 
 
$(".click").click(function(){ 
 
\t \t var windowsize = $window.width(); 
 
\t  if (windowsize = 1280) { 
 
    $(".add").toggleClass("new280"); 
 
\t } 
 
});

.click{ border:1px solid #CCC; width:100px; height:20px;} 
 
\t .add{ width:200px; height:300px; background:#ccc;} 
 
\t .new920{ background:red !important;} 
 
\t .new280{ background:green !important;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<html> 
 
<head> 
 
    
 
</head> 
 

 
<body> 
 
    <div class="click">click</div><br/> 
 
    <div class="add">Add</div> 
 
</body> 
 
</html>

來源

2017-02-15 inaz

你應該花一些時間對媒體查詢 – Satpal

的$窗口更改爲$（窗口），它應該工作 – geekbro

@inaz，它是工作爲你解決我的問題？ –

你應該爲了得到window大小使用innerWidth屬性。

如果你想jQuery版本，你必須使用$(window).width()。

此外，if聲明接受expression，所以你需要if (windowsize == 1920)。還有，你不需要綁定兩個click事件處理程序相同的元素。

$('.click').click(function() { 
 
\t var windowsize = window.innerWidth; 
 
\t if (windowsize == 1920) { 
 
      $(".add").toggleClass("new920"); 
 
\t } 
 
     if (windowsize == 1280) { 
 
      $(".add").toggleClass("new280"); 
 
     } 
 
});

.click{ border:1px solid #CCC; width:100px; height:20px;} 
 
\t .add{ width:200px; height:300px; background:#ccc;} 
 
\t .new920{ background:red !important;} 
 
\t .new1280{ background:green !important;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<html> 
 
<head> 
 
    
 
</head> 
 

 
<body> 
 
    <div class="click">click</div><br/> 
 
    <div class="add">Add</div> 
 
</body> 
 
</html>

來源

2017-02-15 07:51:50

需要使用'=='而不是'='也使用多個點擊處理程序？ – Satpal

你試圖用一個假的語法來訪問window對象。這是$(window)而不是$window;）

以下應該工作。

注意：你真的想檢查窗口的特定寬度嗎？我假設你寧願要檢查寬度是否小於/大於（windowsize <= 1280）。否則，這種情況不太可能會得到滿足。此外，您可能需要檢查窗口大小的innerWidth()。它更準確，代表可顯示內容的空間大小。

$('.click').click(function() { 
    var windowsize = $(window).width(); 
    if (windowsize == 1920) { 
     $(".add").toggleClass("new920"); 
    } 
}); 

$(".click").click(function(){ 
    var windowsize = $(window).width(); 
    if (windowsize == 1280) { 
    $(".add").toggleClass("new280"); 
    } 
});

來源

2017-02-15 07:52:02

變化$window到$(window)，它應該工作

來源

2017-02-15 07:54:55 geekbro

jQuery onClick：如何根據窗口大小切換不同的類？

回答

相關問題