0

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

1 回答 1

0

在函数$('#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);
});​
于 2012-08-23T15:25:15.693 回答