从代码背后调用jquery函数不起作用
本文关键字:函数 不起作用 jquery 调用 代码 背后 | 更新日期: 2023-09-27 18:22:20
我在一个单独的.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'
});};
由于这里的代码,它不会工作
current_fs = $(this).parent();
next_fs = $(this).parent().next();
MyFunc()
中的$(this)
不是像使用$(".next").click(function() { ... }
时那样被点击的按钮,所以你的代码不像使用jQuery
时使用click
函数那样正常工作,现在你可以通过使用MyFunc()
中的参数发送当前和下一个项目的class
来克服它,所以你可以像这样写
function MyFunc(curClass, nxtClass) {
// your code ...
current_fs = $(curClass);
next_fs = $(nxtClass);
// your code...
}
它还没有经过测试,但您应该能够使用这个逻辑来完成它。
您的问题是混淆了变量范围。您的函数MyFunc()正试图将current_fs和next_fs设置为:
current_fs = $(this).parent();
next_fs = $(this).parent().next();
但是,关键字"this"所指的对象将在上下文中使用时发生变化,从单击事件调用函数时,它将指代已单击的按钮,而从代码隐藏方法通过Page.ClientScript.RegisterStartupScript()方法调用它时,它会指代可能对您没有用处的其他对象。
因此,您必须使用不同的方法使函数正确识别当前字段集和下一个字段集。
然而,我的建议是(如果可能的话)完全更改您的实现,以便最终提交按钮是唯一的回发操作,因为这是一个更简单的解决方案,不仅会带来更流畅的用户体验,还会减少客户端和服务器之间的流量。