Question

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

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

当我到达最后的其他地方时 - 如果我对前5篇文章应用不透明度 - 如果我将浏览器的大小调整为低于720px，则这些文章会保留不透明度，这是我不想要的。

非常感谢任何帮助。

$(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

在$('#main article').css('opacity', 1);函数的开头添加checkWidth。顺便说一下，你应该重命名这个函数，因为它的作用并不是它的声音。并且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);
});

jQuery Else / If如果阻止继承样式

1 个答案: