更改一个页面的变量而不影响另一个页面

Question

我有一个页面，它使用了一些javascript的一些瓷砖。在一个页面上，它可以完美地工作。它有6列磁贴，你可以单击每一列来显示更多信息。

我的问题是，我要在另一个页面上使用相同的东西，但只有3列。当我将column变量更改为3时，它在新页面上有效，但原始页面也会更改。我需要保留第一页的6列和新的第3页的列。按照目前的代码方式，我只能在var per_row = 6的第9行使用其中的一个，如何才能在不破坏它的情况下对两个页面都起作用呢？

​

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或其中的任何其他元素：

<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.

资料来源：

HTML meta tag

• MDN：Javascript getElementsByName

• MDN：Javascript getElementsByTagName

• MDN：Javascript getAttribute

• jQuery文档：.prop()

• MDN