0

以前、コードブロックをより短い方法で作成する方法について質問しましたが、答えが得られ、状況に合わせて調整を開始しました。しかし、私は小さな問題に遭遇しました、これが私が実行しているコードです：

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

var default_plugin_options = {
    containerID : "",
    first       : false,
    previous    : false,
    next        : false,
    last        : false,
    startPage   : 1,
    perPage     : 1,
    midRange    : 6,
    startRange  : 1,
    endRange    : 1,
    keyBrowse   : false,
    scrollBrowse: false,
    pause       : 0,
    clickStop   : true,
    delay       : 50,
    direction   : "auto",
    animation   : "fadeIn",
    links       : "title",
    fallback    : 1000,
    minHeight   : true,
    callback    : function(pages, items) {}
};

var Cluster = function(cluster_options, plugin_options) {
    this.options = $.extend({}, default_cluster_options, cluster_options);
    this.plugin_options = $.extend({}, default_plugin_options, plugin_options);
    this.limits = this.options.limits;
    this.inititate_shop();
};

Cluster.prototype.initiate_plugin = function(plugin_navigation, plugin_options) {
    var options = $.extend({}, this.plugin_options, plugin_options);
    return $(plugin_navigation).jPages(options);
};

Cluster.prototype.inititate_shop = function() {
    for (var i = 0; this.viewport_width <= this.limits[i].min; i++) {
        log(this.limits[i].min);
        log(this.viewport_width);
        this.initiate_plugin('.shop-items-navigation', {
            containerID : "shop-items-wrapper",
            perPage     : this.limits[i].items,
            midRange    : 8,
            animation   : "fadeIn",
            links       : "blank",
            keyBrowse   : true,
            callback    : function(pages) {
                log(pages.current);
            }
        });
    }
};

var cluster = new Cluster();

他のコードブロックがあるため、そこにあるコードの一部は意味をなさないかもしれませんが、問題を引き起こす可能性があるのは、私の問題に関連するすべてのコードだと思います。

そして、私の問題は、プロパティfor()内のループです。Cluster.prototype.inititate_shopコンソールにエラーは表示されませんが、this.limits変数（4つのオブジェクトの配列）で別のループが機能するかどうかを確認しようとすると、エラーが発生しました。

そのため、関数が機能しない理由やfor()ループが中断する理由がわからず、誰かが私が見つけていないものを見つけたかどうかをここで尋ねています（私は何かを逃した歴史があります）。

4

1 に答える 1

1

上記のコメントから-問題は、制限リストの最小値が1224であるのに、ビューポートの幅が1366であるということです。

this.viewport_width <= this.limits[i].min;

trueと評価されることはなく、forループ内のコードが実行されることはありません。

編集2

チェックを行うステートメントを分割した場合はどうでしょうか。

Cluster.prototype.inititate_shop = function() {
for (var i = 0; i < this.limits.length; i++) {
    if (this.viewport_width >= this.limits[i].min){
        log(this.limits[i].min);
        log(this.viewport_width);
        this.initiate_plugin('.shop-items-navigation', {
            containerID : "shop-items-wrapper",
            perPage     : this.limits[i].items,
            midRange    : 8,
            animation   : "fadeIn",
            links       : "blank",
            keyBrowse   : true,
            callback    : function(pages) {
                log(pages.current);
            }
        });
        return false; // to break out of loop
        }
    }
};
于 2012-05-16T12:03:46.333 に答える