javascript - jQuery Else/If 阻止继承样式

Question

我想知道如何防止元素在我的 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);
});​

Answer 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);
});​