jquery - 将类添加到正文时销毁 jQuery 脚本

标签 jquery css

我目前正在开发一个具有动态布局的网站。每当窗口调整大小时,它都会检查(通过 jQuery)哪种布局最适合(我为此设置了几个像素范围)并将 .high .med 或 .low 类应用于页面上的元素。

到目前为止,我几乎已经解决了所有问题。只有几件事我想不通。

因为布局严重依赖于 float ,所以我使用了“equalheights”jQuery 插件来使列的大小达到相等的高度:

(function($) {
    $.fn.equalHeights = function(minHeight, maxHeight) {
        tallest = (minHeight) ? minHeight : 0;
        this.each(function() {

            if($(this).height() > tallest) {
                tallest = $(this).height();
            }
        });

        if((maxHeight) && tallest > maxHeight) tallest = maxHeight;
        return this.each(function() {
            $(this).height(tallest).css;
        });
    }
})(jQuery);

问题是当布局切换时,列将不断调整大小。这通常不是问题,但布局差异很大。

首先,我尝试在调整大小之前添加一个 if "has class"语句,但这没有用,因为脚本在添加时没有“看到”类。这可能与函数的执行顺序有关。

我应该指出,我只是一个初学者(4 周的 javascript/jQuery 经验),但我非常愿意学习更多。

最佳答案

对于响应式/自适应网页设计,我建议您使用 CSS3 媒体查询而不是脚本。

请看this

这些处理不多,因此重量轻,大多数现代浏览器和设备都支持 CSS3,因此是一个方便可靠的选项。

关于jquery - 将类添加到正文时销毁 jQuery 脚本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15004277/

相关文章:

javascript - jQuery - setInterval 与 $.each

javascript - 将选定的数据发送回原始窗口

javascript - jQuery slidetoggle 出现故障

jquery - 使用 Twitter Bootstrap 3 的响应式导航栏

jquery - 如何使用 css 和 jquery 组织 50 个或更多 html 表单?

javascript - 如何获取输入文本的宽度(不是输入框)

jquery - 红色警报通知 div 顶部,如 facebook stackexchange

javascript - OWL Carousel 2 向项目添加类

javascript - 对所有类类型的 jQuery 选择器测试

css - 使用带有 Vaadin CssLayout 的 css 将一个区域拆分为 2 个相等的列