我需要一些JavaScript条件，例如媒体查询

Question

我想在jquery中添加一些条件，例如CSS中的媒体查询，有人可以帮助我吗？ 我尝试下面的代码，但无法正常工作：

   jQuery(document).ready(function(){
        if (jQuery(window).width() >= 320) && (jQuery(window).width() <= 479) {

        }  

        if (jQuery(window).width() >= 480) && (jQuery(window).width() <= 567) {

        }  
    });

Answer 1

您在各个条件周围都有括号，但在整个if条件周围没有括号。

尝试这个：

jQuery(document).ready(function(){
        alert("Running");
        alert(jQuery(window).width());
        if ((jQuery(window).width() >= 320) && (jQuery(window).width() <= 479)) {
            alert('Small screen');
        } else

        if ((jQuery(window).width() >= 480) && (jQuery(window).width() <= 567)) {
            alert('Large screen');
        }  else {
            alert("Biggest screen");
        }
});

注意额外的括号后if之前{

Answer 2

实际上，您不需要JS中的媒体查询即可以正确的方式完成任务。 首先：如何在JS中处理媒体查询。 您可以使用matchMedia 。 这是一个简短的文档 。

这是一个简单的示例：

var smallMatcher = matchMedia('(max-width: 480px)');
var biggerMatcher = matchMedia('(max-width: 1024px)');

var run = function(){
    if(smallMatcher.matches) {
        //run code for small
    } else if(biggerMatcher.matches){
        //run code for bigger
    } else {
        //run code for else
    }
};

//now run it
run();

//in case you need to dynamically change on resize
//use addListener
smallMatcher.addListener(run);
biggerMatcher.addListener(run);

但是正如您所说，您不需要此。 您实际需要做的是简单地将关注点分离。 不要将您的行为与CSS混在一起。 只需添加focus / blur或focusin / focusout事件，添加或删除类，然后在CSS中进行其他所有操作即可。

这应该产生干净和简单的代码，这是一个示例 ：

$('#searchbox')
    .on('focus', function(){
        $(this).closest('form').addClass('focused-field');
    })
    .on('blur', function(){
        $(this).closest('form').removeClass('focused-field');
    })
;

其他所有内容都可以并且应该在CSS中处理。

并且如果您需要修改输入按钮的样式，如果按钮本身是聚焦的，不仅是搜索输入，您还会看到下面的小提琴 。