帶切片的窗口寬度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

將其放在一個命名函數中。

小提琴。

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 ...
});