在页面加载时调用函数，在按钮单击时再次调用函数，但参数不同

Call function on page load and again on button click, but with different parameters

本文关键字：调用 函数 参数 按钮 单击 加载      更新时间：2023-09-26

我有一个Ajax函数，它带来web方法的数据并将其显示在页面上。我想在页面加载中显示包含4个项目的第一个页面。单击按钮时，应显示接下来的四个项目，依此类推以进行下一次单击。这在页面加载时执行，但当我单击按钮时，什么都不会发生。

 $(document).ready(function () {
        var s;
        var countnumber = 0;
        function dos(s, countnumber) {
            participant = s.split("!");
            var i
            for (i = countnumber; i < countnumber + 4; i++) {
                part = participant[i].split("ٌ");
                rk = part[5];
                if (rk == 1) {
                    $("#ts" + i).attr('src', 'con1.png'); 
                } else if (rk == 2) {
                    $("#ts" + i).attr('src', 'con2.png');
                } else if (rk == 3) {
                    $("#ts" + i).attr('src', 'con3.png');
                } else if (rk > 3 && rk < 20) {
                    $("#ts" + i).attr('src', 'briliant.ico');
                } else if (arrlist[5] > 20 && arrlist[5] < 50) {
                    $("#ts").attr('src', 'cup.png');
                } else {
                    $("#ts" + i).attr('src', 'box.png');
                }
                    { $("#st" + i) }
                    $("#use" + i).html(part[1]);
                    $("#rnk" + i).html(part[5]);
                    $("#avg" + i).html(part[2]);
                    $("#pnt" + i).html(part[4]);
                    $("#wit" + i).html(part[3]);
                    $("#kl" + i).html(part[0]);
                    $("#use" + i).html(username);
                }
        }
        $('#kil').bind('click', function () {
            countnumber = countnumber + 4;
            dos(s , countnumber);
        })
        var arrlist;
        var participant, part;
        var username, klll, wt, pt, av, rk;

        $.ajax({
            type: "POST",
            url: "rank.aspx/bringdata",
            data: "",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: true,
            cache: false,
            success: function (ret) {
                s = ret.d;
                dos(s, 0);
            },
            error: function (x, e) {
                alert("error");
            }
        });
    });

据我所知，您正试图通过onclick=""事件执行dos()函数。

它不起作用的原因很简单：从全球范围的角度来看，dos()并不存在。

相反，您必须执行以下两项操作之一：

  1. 将dos()函数移到全局可访问的范围中
  2. 通过jQuery将dos()函数附加到click事件

就我个人而言，我更喜欢第二种选择，因为它可以避免污染全局命名空间。

来自局部变量

示例：局部变量

function f() {
    var x = 1;
}
process_x(x); # this will trigger a "ReferenceError: x is not defined"

我相信你知道，从外部访问函数的本地变量是不可能的。

到本地函数–

当你在函数中定义一个函数时，你本质上是在创建一个恰好是函数的局部变量。

示例：函数声明，这是您所拥有的表单：

$(document).ready(function() { # enclosing_function
    function dos() {
    }
});

如前所述，这将导致dos()是enclosing_function的本地。

它们本质上是一样的

你可以这样想，以更好地说明相似性：

示例：函数表达式

$(document).ready(function() { # enclosing_function
    var dos = function () {
    };
});

吊起colo–函数高

在示例中，这两个版本是等效的。但是，函数声明–也就是说，没有赋值的东西（即所谓的"函数表达式"）–被"悬挂"在代码的顶部，在代码中对它们进行了定义。

这意味着，该定义被移动（或"提升"）到其定义范围的最顶部（或开始处）。在定义该函数之前，不可能执行代码（在该范围内）。因此，您无法接收函数声明的ReferenceError。（除非你在错误的范围内。）

另一方面，函数表达式的求值方式与所有其他语句的求值方式相同：只要程序流遇到它们。

示例：吊装

$(document).ready(function() { # enclosing_function
    # <- This is where "hoisted" is being defined <--
    non_hoisted(); # ReferenceError                 |
    hoisted();     # Works fine                     |
    var non_hoisted = function () { # This is where "non_hoisted" is defined
                                                    |
    };                                              ^
                                                hoisting
    non_hoisted(); # Works fine                     ^
                                                    |
    function hoisted() { ------>-------->------->----
    }
});

还有一件事

var s;
function dos(s, countnumber) {
    ...
}

形式参数s将引入s作为dos()函数内部的局部变量。它将从其父作用域中隐藏s变量。

为什么要将s作为参数传递给dos()函数？当Ajax请求成功返回时，您已经将其分配给enclosing_function()中的局部变量var s。

相关文章：