从后面的代码调用 jquery 函数不起作用

Question

我在单独的 .js 文件中有一个名为 MyFunc() 的 jquery 函数。我想在按钮单击事件后面的 c# 代码中调用此函数。 （即如果数据添加成功，请致电 MyFunc() ）。 原来这个函数是这样的

$(".next").click(function () {

点击asp:按钮时直接调用的地方。

<asp:button id="btnNext" runat="server" CssClass="next action-button" Text="Next" OnClientClick="return false"/>

所以我把函数改成

function MyFunc(){}

和按钮

<asp:Button ID="btnNext" runat="server" Text="Next" CssClass="action-button" OnClick="btnNext_Click1"/>

在按钮点击事件后面的代码中

Page.ClientScript.RegisterClientScriptInclude(GetType(), "MyScript", "Easying.js");
Page.ClientScript.RegisterClientScriptInclude(GetType(), "MyScript", "Reg.js");
Page.ClientScript.RegisterStartupScript(GetType(), "MyScript", "MyFunc()", true);

它没有给我任何错误。但它不起作用。 下面是函数。

var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches

$(".next").click(function() {

    if (animating) return false;
    animating = true;

    current_fs = $(this).parent();
    next_fs = $(this).parent().next();

    //activate next step on progressbar using the index of next_fs
    $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

    //show the next fieldset
    next_fs.show();
    //hide the current fieldset with style
    current_fs.animate({ opacity: 0 }, {
        step: function (now, mx) {
            //as the opacity of current_fs reduces to 0 - stored in "now"
            //1. scale current_fs down to 80%
            scale = 1 - (1 - now) * 0.2;
            //2. bring next_fs from the right(50%)
            left = (now * 50) + "%";
            //3. increase opacity of next_fs to 1 as it moves in
            opacity = 1 - now;
            current_fs.css({ 'transform': 'scale(' + scale + ')' });
            next_fs.css({ 'left': left, 'opacity': opacity });
        },
        duration: 800,
        complete: function () {
            current_fs.hide();
            animating = false;
        },
        //this comes from the custom easing plugin
        easing: 'easeInOutBack'
    });
});

另外，如您所见，MyFunc() 用于从一个字段集更改为另一个字段集。我的 aspx 页面有 3 个字段集。和一个进度条（1--2--3）。进度条应该从一个移动到另一个。并且字段集也改变了。目前的情况是我看到进度条从 1 直接移动到 3。并且字段集没有变化。 这是我为它获取代码的地方。正如我上面提到的，当我直接从 aspx 页面调用它时，它工作得很好。 http://codepen.io/atakan/pen/gqbIz

这里是 MyFunc() !!

function MyFunc() {
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches

if (animating) return false;
animating = true;

current_fs = $(this).parent();
next_fs = $(this).parent().next();

//activate next step on progressbar using the index of next_fs
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

//show the next fieldset
next_fs.show();
//hide the current fieldset with style
current_fs.animate({ opacity: 0 }, {
    step: function (now, mx) {
        //as the opacity of current_fs reduces to 0 - stored in "now"
        //1. scale current_fs down to 80%
        scale = 1 - (1 - now) * 0.2;
        //2. bring next_fs from the right(50%)
        left = (now * 50) + "%";
        //3. increase opacity of next_fs to 1 as it moves in
        opacity = 1 - now;
        current_fs.css({ 'transform': 'scale(' + scale + ')' });
        next_fs.css({ 'left': left, 'opacity': opacity });
    },
    duration: 800,
    complete: function () {
        current_fs.hide();
        animating = false;
    },
    //this comes from the custom easing plugin
    easing: 'easeInOutBack'
});};

Answer 1

因为这里有你的代码，它不会工作

current_fs = $(this).parent();
next_fs = $(this).parent().next();

MyFunc() 中的$(this) 不是像使用$(".next").click(function() { ... } 时那样被单击的按钮，因此您的代码无法像使用click 函数使用jQuery 时那样按预期工作，因为现在你可以通过使用MyFunc()中的参数为当前和下一个项目发送class来克服它，所以你可以这样写

function MyFunc(curClass, nxtClass) {
    // your code ...

    current_fs = $(curClass);
    next_fs = $(nxtClass);

    // your code...
}

它还没有测试，但你应该可以用这个逻辑来做。

Answer 2

您的问题是您混淆了变量范围。您的功能 MyFunc() 正在尝试将 current_fs 和 next_fs 设置为：

current_fs = $(this).parent();
next_fs = $(this).parent().next();

但是 'this' 关键字所指的对象将在从单击事件调用函数时的上下文中使用时发生变化，在该上下文中，它将引用已单击的按钮，而不是通过 Page.ClientScript.RegisterStartupScript() 方法从您的代码后面的方法中调用，在该方法中它将引用一些可能对您没有用的其他对象。

因此，您必须使用不同的方法使函数正确识别当前字段集和下一个字段集。

不过，我的建议是完全更改您的实现（如果可能），以便最终提交按钮是唯一的回发操作，因为它是一种更简单的解决方案，不仅可以带来更流畅的用户体验，还可以减少之间的流量客户端和服务器。