Измените переменную на одну страницу, не затрагивая другую страницу

Question

У меня есть страница, использующая некоторые javascript для некоторых фрагментов. На одной странице он работает отлично. Он имеет 6 столбцов плитки, и вы можете щелкнуть каждый, чтобы показать больше информации.

Моя проблема в том, что я должен был использовать одно и то же для другой страницы, но иметь только 3 столбца. Когда я изменяю переменную столбца на 3, она работает на новой странице, но исходная страница также изменяется. Мне нужно сохранить первые страницы 6 столбцов и новые столбцы страницы 3. То, как код в настоящее время я могу иметь только один или другой в строке 9 для var per_row = 6 Как я могу сделать эту работу для обеих страниц, не нарушая ее?

var griddle_prep = function($el){ 
 
     if(!$el.data('init')){ 
 
      $el.addClass('griddle-initialized'); 
 
      $el.data('init',$el.html()); 
 
     } 
 
    }; 
 

 
    var griddle_update = function($el){ 
 
     var per_row = 6, 
 
      window_width = $(window).width(); 
 
     // instead of calculating heights we're just going to piggyback breakpoints 
 
     // to determine how many items are in each row, see _griddle.scss 
 
     if(window_width<960){ 
 
      per_row = 5; 
 
     } 
 
     if(window_width<768){ 
 
      per_row = 4; 
 
     } 
 
     if(window_width<650){ 
 
      per_row = 3; 
 
     } 
 
     if(window_width<530){ 
 
      per_row = 2; 
 
     } 
 

 
     // proceed with updating the markup 
 
     if($el.data('init')) { 
 
      // wipe out the existing markup and use the stored 'template' 
 
      $el.html($el.data('init')); 
 

 
      // wrap each 'row' with a wrapper 
 
      var divs = $el.children(), 
 
       markup = '<div class="wrapper group griddle-row">', 
 
       i = 0; 
 

 
      divs.each(function(){ 
 
       if(i>=per_row){ 
 
        markup += '</div>'; 
 
        markup += '<div class="wrapper group griddle-row">'; 
 
        i = 0; 
 
       } 
 
       markup += $(this).wrap('<div>').parent().html(); 
 
       i++; 
 
      }); 
 

 
      markup += '</div>'; 
 
      $el.html(markup); 
 
     } 
 
    }; 
 

 
    var griddle_clean_up = function($el){ 
 
     var $details = $el.find('.griddle-detail-display'); 
 
     if($details.length){ 
 
      $details.remove(); 
 
      $el.find('.griddle-active').removeClass('griddle-active'); 
 
     } 
 
    }; 
 

 
    var griddle_position_indicator = function($el,$details){ 
 
     var indicator_left = $el.offset().left + parseInt($el.outerWidth()/2,10); 
 
     $details.find('.griddle-indicator').css('left',indicator_left+'px'); 
 
    }; 
 

 
    var $griddles = $('.griddle'); 
 
    if($griddles.length){ 
 

 
     $('.griddle-details').hide(); 
 

 
     // bind our details 
 
     $('body').on('click','.griddle-trigger',function(e){ 
 
      e.preventDefault(); 
 
      var $this = $(this), 
 
       $row = $this.parents('.griddle-row'), 
 
       target_row_index = $row.index(), 
 
       $griddle = $row.parents('.griddle'), 
 
       toggle = $(this).hasClass('griddle-active'), 
 
       $current_row = $griddle.find('.griddle-detail-display'), 
 
       $existing_details = $current_row, 
 
       current_row_index = $current_row.prev().index(), 
 
       $target_details = $this.parents('.griddle-item').find('.griddle-details').clone().show().removeAttr('id').addClass('griddle-detail-display').hide(); 
 

 
      $griddle.find('.griddle-active').removeClass('griddle-active'); 
 

 
      if(toggle){ 
 
       $existing_details.slideUp('fast',function(){ 
 
        $existing_details.remove(); 
 
       }); 
 
      }else{ 
 

 
       // is a current row already displayed? 
 
       if(current_row_index>-1){ 
 

 
        // check to see if we're just swapping out 
 
        if(target_row_index===current_row_index){ 
 
         // just swap it out 
 
         $current_row.remove(); 
 
         $row.after($target_details); 
 
         $target_details.show(); 
 
        } else { 
 
         // remove the non-applicable row 
 
         $existing_details.slideUp('fast',function(){ 
 
          $existing_details.remove(); 
 
         }); 
 

 
         // show the applicable row 
 
         $row.after($target_details); 
 
         $griddle.find('.griddle-detail-display').slideDown('fast'); 
 
        } 
 

 
       } else { 
 
        // no current row, just slide it down 
 
        $row.after($target_details); 
 
        $griddle.find('.griddle-detail-display').slideDown('fast'); 
 
       } 
 

 
       $this.addClass('griddle-active'); 
 
       griddle_position_indicator($this,$target_details); 
 
      } 
 

 
     }); 
 

 
     $griddles.each(function(){ 
 
      var $griddle = $(this); 
 

 
      // going to grab the griddle HTML because we're going to be swapping it in and out when resizing 
 
      griddle_prep($griddle); 
 

 
      // init the rows 
 
      griddle_update($griddle); 
 

 
      // update the rows on resize 
 
      $(window).smartresize(function(){ 
 
       griddle_clean_up($griddle); 
 
       griddle_update($griddle); 
 
      }); 
 
     }); 
 
    }

Answer 1

Одно отношение может быть, чтобы включить эту информацию в своих страницах, например, на вас голову, используя META тег:

<html> 
<head> 
    <meta name="pageRows" content=3 /> 
</head> 
<body>...</body> 
</html> 

Другие варианты использует тело , или любой другой элемент внутри него:

<body ... pageRows=3> ... 

, а затем в ваших JS:

// Meta: 
// Using jQuery: 
var per_row = $('meta[name="pageRows"]').prop('content'); 
// Vanilla JS: 
var per_row = document.getElementsByName("pageRows").getAttribute('content'); 

// Element: 
// Using jQuery: 
var per_row = $('body').prop('pageRows'); 
// Vanilla JS: 
var per_row = document.getElementsByTagName("body").getAttribute('pageRows'); 

// Don't forget to specify a default, in case the `META` tag doesn't exist. 

Источники:

• MDN: HTML meta tag
• MDN: Javascript getElementsByName
• MDN: Javascript getElementsByTagName
• MDN: Javascript getAttribute
• Jquery Документация: .prop()