Question

我遇到的问题是我需要这个jQuery代码来将颜色编码列表分解为更小的设备。对于较大的设备，代码应该只是在彩色列表中。现在我看起来工作得很好。问题在于，较大的彩色列表的jQuery格式不应用于近似像素619和765之间。它需要以小于600像素的宽度显示一种方式而对于大于600像素显示另一种方式。任何洞察这个问题将不胜感激。我为草率的语法道歉，但我只是想快点把它弄出来。

<script src="js/jquery-1.11.1.min.js"></script>
                <script language="javascript">
        $(function(){
            var set = '';
        // jqUpdateLow to change with the width of the screen
        function jqUpdateLow(){
        var width = $(window).width();
        var x = 0;
        var count = 0;
        var text;
        if(width < 599 && jqUpdateLow.counter != 1)
        {
            jqUpdateLow.counter = 1;
            jqUpdateHigh.counter = 1;
            var set = 1;
            // $('body').append(" First conditional clause exectued ");

        $('#indiv_slots,#indiv_head').each(function(indexm,stack) {
        $(stack).css('margin-top','50px');
        });
            $('#indiv_slots div,#indiv_head div').each(function(index,element) {
        // Switch to set the the color and text for each element of the list    
        switch(count)
        {
        case 0:
        color = "#7FDBFF"; // aqua
        text = "ID";
        break;
        case 1:
        color = "#E9967A"; // dark salmon
        text = "Available";
        break;
        case 2:
        color = "#FF4136"; // red
        text = "Type";
        break;
        case 3:
        color = "#DDDDDD"; // silver
        text = "Cat";
        break;
        case 4:
        color = "#01FF70"; // lime
        text = "Dog";
        break;
        case 5:
        color = "#39CCCC"; // teal
        text = "Rent";
        break;
        case 6:
        color = "#FF851B"; // orange
        text = "State";
        break;
        case 7:
        color = "#3D9970"; // olive
        text = "Bedrooms";
        break;
        }   
            $(element).css("background-color",color);
            count++;
            if(count == 8) { count = 0;}
            if(index > 7)
            {
                $(element).prepend('<span class="prepended">' + text + ':' + '</span>');
            }
        });

        }
        };
        function jqUpdateHigh()
        { 
        var width = $(window).width();
        var x = 0;
        var count = 0;
        var text;
        if(width > 601 && jqUpdateHigh.counter != 0)
        {
            jqUpdateHigh.counter = 0;
            jqUpdateLow.counter = 0;
            // Removes prepended text.
            $('.prepended').remove();
            $('#indiv_slots div,#indiv_head div').each(function(indexb,elementb) {
            $(elementb).css("background-color","");
            $(elementb).css("opacity","");
            });
            // $('body').append(" Second conditional clause exectued ");
            $('#indiv_slots,#indiv_head').each(function(indexx,elementx) {
            $(elementx).css('margin-top','');
            switch(indexx)
            {
            case 0:
            color = "#7FDBFF"; // aqua
            break;
            case 1:
            color = "#E9967A"; // dark salmon
            break;
            case 2:
            color = "#FF4136"; // red
            break;
            case 3:
            color = "#DDDDDD"; // silver
            break;
            case 4:
            color = "#01FF70"; // lime
            break;
            case 5:
            color = "#E9967A"; // dark salmon
            }
            $(elementx).css('background-color',color);
            });
        }
        };
        $('.starter-template .row').css('background-color','');
        jqUpdateLow();
        jqUpdateHigh();
        $(window).resize(function() {
        jqUpdateLow();
        jqUpdateHigh();
        });
        });

Answer 1

你真的应该使用媒体查询，但要回答你的问题，试试这个：

$(window).resize(function(){
    if ($(window).width() <= 600){  
        console.log("do something here, such adding a CSS Class");
    }   
});

jQuery（window）.risize（）没有按预期工作

1 个答案: