Question

我有一个代码块，其中没有复杂的东西，它基于三个不同的数字（在我的情况下视口宽度）：

if(viewport_width > 1224) {
    $(".shop-items-navigation").initiate_shop({ containerID: "shop-items-wrapper", perPage: 8 }, function(pages){
        current_page = pages.current;
        total_pages = pages.count;
    });
}
if(viewport_width < 1224 && viewport_width > 954) {
    $(".shop-items-navigation").initiate_shop({ containerID: "shop-items-wrapper", perPage: 6 }, function(pages){
        current_page = pages.current;
        total_pages = pages.count;
    });
}
if(viewport_width < 954 && viewport_width > 624) {
    $(".shop-items-navigation").initiate_shop({ containerID: "shop-items-wrapper", perPage: 4 }, function(pages){
        current_page = pages.current;
        total_pages = pages.count;
    });
}
if(viewport_width < 624) {
    $(".shop-items-navigation").initiate_shop({ containerID: "shop-items-wrapper", perPage: 2 }, function(pages){
        current_page = pages.current;
        total_pages = pages.count;
    });
}

所以我（一种方法）将这三个数字放在这样的数组中：

var widths = [1224, 954, 624];

在应用foreach函数后：

for(var i in widths ) {
   ...
}

但我无法想象如何围绕这三个数字来解决这个问题。唯一根据数组中的数字而改变的是另一个数字：

{ ... perPage: 6 ... }

可以从8下降到2.如果可能的话，我希望对此有所帮助，或者可能采用其他方式编写它会很好。

Answer 1

您可以制作一个对象列表：

var limits = [
  { min: 1224, perPage: 8 },
  { min: 954, perPage: 6 },
  { min: 624, perPage: 4 },
  { min: 0, perPage: 2 }
];

然后：

for (var i = 0; viewport_width <= limits[i].min, i++);
$(".shop-items-navigation").initiate_shop({ containerID: "shop-items-wrapper", perPage: limits[i].perPage }, 
   function(pages){
      current_page = pages.current;
      total_pages = pages.count;
 });

Answer 2

尝试以下

var page;
if (viewport_width > 1224) {
  page = 8;
} else if (viewport_width > 954) {
  page = 6;
} else if (viewport_width > 624) { 
  page = 4;
} else {
  page = 2;
}

$(".shop-items-navigation").initiate_shop({ containerID: "shop-items-wrapper", perPage: page }, function(pages){
    current_page = pages.current;
    total_pages = pages.count;
});

Answer 3

我会做类似下面的事情，

是全部if..if..还是else If？我认为它应该是if..else if..

if(viewport_width > 1224) {
    initShop(pages, 8);
} else if(viewport_width >= 954) {
    initShop(pages, 6);
} else if(viewport_width >= 624) {
    initShop(pages, 4);
} else if(viewport_width < 624) {
    initShop(pages, 2);
}    

function initShop(pages,perPage) {
      $(".shop-items-navigation").initiate_shop({ containerID: "shop-items-wrapper", perPage: 8 }, function(pages){
        current_page = pages.current;
        total_pages = pages.count;
    });

}

修改：使用if..if更新else if，因为它更有意义。还将条件更改为>=以涵盖所有范围。

Orig Post：包含所有if..if

if(viewport_width > 1224) {
    initShop(pages, 8);
}
if(viewport_width < 1224 && viewport_width >= 954) {
    initShop(pages, 6);
}
if(viewport_width < 954 && viewport_width >= 624) {
    initShop(pages, 4);
}
if(viewport_width < 624) {
    initShop(pages, 2);
}    

function initShop(pages,perPage) {
      $(".shop-items-navigation").initiate_shop({ containerID: "shop-items-wrapper", perPage: 8 }, function(pages){
        current_page = pages.current;
        total_pages = pages.count;
    });

可以用更短的方式编写这段代码吗？

3 个答案: