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。这是brief documentation。

这是一个简单的例子：

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混合在一起。只需添加焦点/模糊或焦点/焦点事件，添加或删除一个类，并在CSS中执行其他所有操作。

这应该会产生干净简单的代码，这里是an example：

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

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

如果你需要修改输入按钮的样式，如果按钮本身是聚焦的，而不仅仅是搜索输入，你可以看到the following fiddle。

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

2 个答案: