jQuery if语句与CSS媒体查询

我试图使用媒体查询来禁用某些浏览器宽度的浮动。这if语句只适用于我为当前大小重新加载页面。当CSS属性更改时，是否有可能让jQuery应用更改？jQuery if语句与CSS媒体查询

if($('.two-column li').css('float') == 'left') { 
    $('.two-column li').equalHeights(); 
}

，我大概应该使用$（本）或东西的第二个$（“两列礼”），但我不知道为什么它不工作。我不太了解jQuery。

编辑：

默认情况下，两列里的风格是一样的东西

.two-column li { 
    float: left; 
}

，然后让我们说......

@media only screen and (max-width: 767px) { 
    .two-column li { 
     float: none; 
    } 
}

这并不工作。当宽度低于767px时，它停止浮动。我上面的丑陋的jQuery似乎部分工作。默认情况下，equalheights插件运行，但是当宽度低于767px时，插件不运行。我的问题是，它是否运行取决于浏览器在加载页面时的大小。我试图在响应式设计中使它像媒体查询一样动态。

我在准备好的文档上调用它。

随着更多的研究和下面的评论的帮助，现在是这样的，包括文档准备好......仍然不做调整大小，但需要刷新。

$(document).ready(function() { 
    $('.two-column li').filter(function(index) { 
     return $(this).css('float') != 'none' 
    }).equalHeights(); 
});

来源

2011-06-20 gavsiu

你什么时候调用这段代码？它是否在window.onresize事件处理程序中？请提供更多内容 –

您可以发布您正在使用的代码来根据浏览器宽度切换样式吗？有一种方法可以让浏览器仅仅通过调整浏览器的大小来尊重它，所以这可能是解决它的最简单方法。 –

目前还不清楚媒体查询如何与您的代码以及您的示例中正在执行的jQuery相关。媒体查询在此处定义：http://www.w3.org/TR/css3-mediaqueries/ –

好的..所以经过更多的研究和一些摆弄，我似乎有我想要的功能。我不能编写适当的jQuery代码，有人能告诉我我做错了什么使它更优雅吗？

var $float = $('.two-column li'); 
$float.filter(function(index) { 
    return $(this).css('float') != 'none' 
}).equalHeights(); 
$(window).resize(function() { 
    $float.filter(function(index) { 
     if ($(this).css('float') != 'none') { 
      $float.equalHeights(); 
     } 
     else { 
      $float.height('auto'); 
     } 
    }); 
});

来源

2011-06-20 19:29:06 gavsiu

modernizr提供media queries testing。此外，您还可以附加一个事件处理程序到$(window).resize()

来源

2011-06-20 03:27:55

您粘贴的示例代码有点偏离，它不会达到您期望的效果。你需要做的是选择你想要操作的所有元素，然后根据它们的float类型的值对它们进行过滤。然后，过滤后，将所需的操作应用于过滤后的集合。举例来说，如果你想运行equalHeights的组具有浮动设置为‘左’所有“二柱立”元素的插件，试试这个代码：

$('.two-column li').filter(function(index) { 
    if($(this).css('float') == 'left') return true; 
}).equalHeights();

虽这么说，这听起来就像问题的根源在于浏览器调整大小时，CSS媒体查询未正确启动。你可以发布你的媒体查询代码，看看里面是否有更简单的解决方案？

来源

2011-06-20 03:30:41

你可以做到这一点使用$(window).resize()

$('div#first').addClass("right"); 

$(window).resize(function() { 

    $('#first').toggleClass("right", $(this).width() > '500'); 

});

确保div获取与float类，所以将其添加调整大小功能之外。
调整窗口大小时，根据窗口的大小打开或关闭该类（即浮动或不浮动）。在这种情况下，当窗口大于500px时会发生切换。相反，当它变小时，班级被移除。
将宽度设置为任何你喜欢的。

http://jsfiddle.net/jasongennaro/7qc8e/3/

调整窗口的大小，看看它的工作。

来源

2011-06-20 04:30:19

jQuery if语句与CSS媒体查询

回答

相关问题