Question

拥有此代码：

 $(window).resize(function () {

     if ($(window).width() >= 320 && $(window).width() <= 480) {
         $(".projects").slice(0, 8).css("margin", "10px");
     } else if ($(window).width() > 480){
         $(".projects").slice(3, 6).css("margin", "10px");
     };
 })

我的问题是：

切片3,6是默认值。如何在没有窗口的情况下将此显示调整为页面加载时的默认值。
如果宽度大于480px然后只做切片3,6所有其他切片是默认选项怎么办？

Answer 1

将其放入命名函数中。

Fiddle.

function slice_it() {
    if ($(window).width() >= 320 && $(window).width() <= 480) {
        $(".projects").slice(0, 8).css("margin", "10px");
    } else if ($(window).width() > 480){
        $(".projects").slice(3, 6).css("margin", "10px");
    };
}

$(window).resize(slice_it);
slice_it(); // <--- on load

如果我正确阅读了你的第二个要点：

function slice_it() {
    if ($(window).width() > 480){
        $(".projects").slice(3, 6).css("margin", "10px");
    } else {
        $(".projects").slice(0, 8).css("margin", "10px");   
    }
}

编辑：

评论中最后的小提琴。如果这是正确的，您应该考虑使用each，如：

function slice_it() {
    if ($(window).width() > 480) {
        $(".projects").slice(0, 8).each(function(i) { // Pass index "i"
            if (i < 3 || i > 5) { // Here you check for index
                $(this).css("margin", "");
            } else {
                $(this).css("margin", "10px");
            } 
        });
    } else {
        $(".projects").slice(0, 8).css("margin", "10px");   
    }
}

通常，使用.css("margin", "");效果会将样式重置为默认值。

您也可以将切片全部放在一起，并在$(".projects").each(...上逐个循环。

打破jQuery .each循环返回false。例如：

$(".projects").each(function(i) {
    if (i > 7)
         return false; // This aborts the each loop.
     ... do other stuff ...
});

窗口宽度jquery与切片

1 个答案:

编辑：