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, это работает для вас мое решение? –

Вы должны использовать innerWidth свойство для того, чтобы получить window размер.

Если вы хотите версию 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

нужно использовать '==' not '=' также использование нескольких обработчиков кликов? – 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: Как переключать разные классы на основе размера окна?

ответ

Смежные вопросы