javascript - 带有切片的窗口宽度jquery

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 默认。如何在不调整窗口大小的情况下将此显示设置为页面加载时的默认设置。

• 如果宽度大于 480 像素，那么如何只执行切片 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");   
    }
}

编辑:

根据评论中的最后一个 fiddle 。如果那是正确的，你应该考虑使用 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 ...
});