JavaScript 传递参数问题

JavaScript passing argument problem

本文关键字:问题 参数 JavaScript      更新时间:2023-09-26

我有以下代码

for (var i = 0; i < that.$el.mini.length; i++) {
            var pag = that.$el.mini[i].pagination;
            // Mini-Slider Pagination
            $('li', pag).each( function(j, el) {
                $(el).click( function() {
                    /*
                     * Toggle Mini-Slide
                     */
                    that.slider_fn.mini.show(i, j);
                    return false;
                });
            });
        }

所以,基本上,我想做的是在单击元素时that.slider_fn.mini.show(i, j);运行此函数。

问题是我想使用变量 i ,它会在循环中更改其值。单击元素时,i值为最新数字,即 that.$el.mini.length

如何让 JavaScript(或函数)记住该特定数字?

使用闭包关闭 i 的值:

$(el).click( (function(i_){
  return function() {
     that.slider_fn.mini.show(i_, j);
     return false;
  };
})(i));

在此之前,您的函数引用的是名为 i 的变量,现在在每次迭代中,您都会创建一个引用 i_ 的新函数,并且该变量对于每个函数都是唯一的,并引用创建函数时i的值。

您需要创建一个函数闭包,并将要保留的变量作为参数传入,如下所示:

for (var i = 0; i < that.$el.mini.length; i++) {
    var pag = that.$el.mini[i].pagination;
    $('li', pag).each(function (j, el) {
        // function closure to persist i, j, and el
        (function (idx, jdx, elem) {
            $(elem).click(function () {
                that.slider_fn.mini.show(idx, jdx);
                return false;
            });
        } (i, j, el));
    });
}
给出的

闭包答案是解决问题的传统方法,但如果你不关心自调用匿名函数,你可以考虑使用 forEach()

that.$el.mini.forEach(function (element,i){
            var pag = element.pagination;
            // Mini-Slider Pagination
            $('li', pag).each( function(j, el) {
                $(el).click( function() {
                    /*
                     * Toggle Mini-Slide
                     */
                    that.slider_fn.mini.show(i, j);
                    return false;
                });
            });
        }) ;

警告:并非所有浏览器都实现了forEach()。 您可以看到如何填充它,如 https://developer.mozilla.org/en/JavaScript/Reference/global_objects/array/foreach"兼容性"中所述

这是假设pag是一个元素,并且你正在使用jquery。

for (var i = 0; i

var pag = that.$el.mini[i].pagination;
// Mini-Slider Pagination
$('li', pag).each( function(j, el) {
    $(el).data('page-index', i); // add data to the element being clicked
    $(el).click( function() {
        /*
         * Toggle Mini-Slide
         */
        that.slider_fn.mini.show($(this).data('page-index'), j);
        return false;
    });
});

}