jQuery Else / If 防止继承样式答案

【问题标题】：jQuery Else / If Prevent Inheriting StylesjQuery Else / If 防止继承样式
【发布时间】：2012-08-23 23:47:41
【问题描述】：

我想知道如何防止元素在 else / if 断点中保留相同的内联样式。

我正在做的是尝试根据窗口宽度更改样式。与 CSS 媒体查询的方法非常相似，除了我需要增加一个数值，这是我不能用 CSS 做的事情，因此是 jQuery。

当我进入最后的 else if - 我对前 5 篇文章应用不透明度时 - 如果我将浏览器的大小调整回小于 720 像素，这些文章会保留不透明度，这是我不想要的。

非常感谢任何帮助。

$(document).ready(function() {
    function checkWidth() {
        var windowSize = $(window).width();
        if (windowSize >= 1 && windowSize <= 479) {
            var posTop = 0;
            $('#main article').each(function() {
                $(this).css('top', posTop + 'px');
                posTop += 160;
            });
        } else if (windowSize >= 480 && windowSize <= 719) {
            var posTop = 0;
            $('#main article').each(function() {
                $(this).css('top', posTop + 'px');
                posTop += 240;
            });
        } else if (windowSize >= 720 && windowSize <= 959) {
            $('#main article').slice(0, 5).each(function() {
                $(this).css('opacity', 0.4);
            });
        }
    }
    // Execute on load
    checkWidth();
    // Bind event listener
    $(window).resize(checkWidth);
});

【问题讨论】：

需要在 if..else 逻辑的所有分支中设置不透明度。
你知道你可以在你的css中使用表达式吗？通常不是它的忠实粉丝，但在这种情况下，你正在做的是纯粹的造型，它会让你的所有造型保持在一起。像这样richnetapps.com/using_javascript_expressions_in_css
哇，我对 css 表达式一无所知……不确定我是否想走这条路，但我肯定会尝试一下。谢谢你的小费。

标签： javascript jquery html css width

【解决方案1】：

在checkWidth函数的开头添加$('#main article').css('opacity', 1);。顺便说一句，你应该重命名这个函数，因为它所做的并不是它听起来的样子。在posTop 变量和最后一个each 循环中不需要。我的变体进行了一些重构：

$(document).ready(function() {
    function changeStylesDependsOnWidth() {
        $('#main article').css('opacity', 1);

        var windowSize = $(window).width();

        if (windowSize >= 1 && windowSize <= 479) {
            $('#main article').each(function(i) {
                $(this).css('top', i * 160 + 'px');
            });
        } else if (windowSize >= 480 && windowSize <= 719) {
            $('#main article').each(function(i) {
                $(this).css('top', i * 240 + 'px');
            });
        } else if (windowSize >= 720 && windowSize <= 959) {
            $('#main article').slice(0, 5).css('opacity', 0.4);
        }
    }

    changeStylesDependsOnWidth();
    $(window).resize(changeStylesDependsOnWidth);
});

【讨论】：

他收到了答案通知。你不需要“撞”：p
嘿，我马上要测试这段代码，只需要完成一些工作，抱歉耽搁了，但我真的很感谢你的帮助！我会让你知道这是怎么回事。
我打算重新审视这个......不幸的是，你的代码对我不起作用，但我没有放弃。我会尽快回到这里。