带有 CSS 媒体查询的 jQuery if 语句答案

【问题标题】：jQuery if statement with CSS media queries带有 CSS 媒体查询的 jQuery if 语句
【发布时间】：2011-06-21 03:29:06
【问题描述】：

我正在尝试使用媒体查询来禁用特定浏览器宽度的浮动。此 if 语句仅在我重新加载当前大小的页面时才有效。是否可以让 jQuery 在 CSS 属性更改时应用更改？

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

我可能应该在第二个 $('.two-column li') 上使用 $(this) 或其他东西，但我不知道为什么它不起作用。我对jQuery了解不多。

编辑：

默认情况下，两列 li 的样式类似于

.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();
});

【问题讨论】：

你什么时候调用这个代码？它在 window.onresize 事件处理程序中吗？请提供更多上下文
你能发布你用来根据浏览器宽度切换样式的代码吗？有一种方法可以通过调整浏览器大小来让浏览器尊重它，因此这可能是修复它的最简单方法。
目前尚不清楚媒体查询与您的代码有何关联，以及 jQuery 在您的示例中做了什么。媒体查询在这里定义：w3.org/TR/css3-mediaqueries

标签： jquery if-statement media-queries

【解决方案1】：

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

【讨论】：

【解决方案2】：

您粘贴的示例代码有点偏离，它不会按照您的预期进行。你需要做的是选择所有你想要操作的元素，然后根据它们的浮动样式的值来过滤它们。然后，在过滤后，将您想要的操作应用于过滤后的集合。例如，如果你想在所有浮动设置为“left”的“.two-column li”元素的集合上运行equalHeights插件，试试这个代码：

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

话虽如此，听起来问题的根源在于调整浏览器大小时未正确激活 CSS 媒体查询。您能否发布您的媒体查询代码，看看是否有更简单的解决方案？

【讨论】：

【解决方案3】：

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

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

$(window).resize(function() {

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

});

确保div 获取带有float 的类，因此将其添加到resize 函数之外。
调整窗口大小时，根据窗口大小打开或关闭类（即浮动或不浮动）。在这种情况下，当窗口大于 500 像素时会发生切换。相反，当它更小时，该类被删除。
将宽度设置为您喜欢的任何值。

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

调整窗口大小以使其正常工作。

【讨论】：

【解决方案4】：

好的.. 所以经过更多的研究和一些摆弄，我似乎拥有了我想要的功能。虽然我无法编写正确的 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');
        }
    });
});

【讨论】：