CODEWITHSUNDEEP
javascriptjquery
Roland
Roland

Reputation: 9731

can this block of code be written in a shorter way?

I have a block of code, no complicated stuff is going on in it, and it is based on three different numbers ( viewport widths in my case ) :

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

So I though ( one method ) to place those three numbers in an array like this :

var widths = [1224, 954, 624];

And after apply an foreach function on it :

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

But I cannot really figure how to wrap that up around those three numbers. The only thing that changes depending on the number in the array is another number :

{ ... perPage: 6 ... }

Which can vary from 8 down to 2. I would like a little help with this if possible, or maybe another way of writing it would be just fine.

Upvotes: 2

Views: 103

Answers (3)

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79850

I would do something like below,

Also Is it all if..if.. or else If? I think it should be 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;
    });

}

Edit: updated if..if with else if as it makes more sense.. Also changed conditions to >= to cover all range.

Orig Post: containing all 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;
    });

Upvotes: 0

JaredPar
JaredPar

Reputation: 755457

Try the following 

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

Upvotes: 2

Pointy
Pointy

Reputation: 413996

You could make a list of objects:

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

Then:

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

Upvotes: 5

Related Questions