我有这个JS代码:
function paging() {
$('.paging li').click(function(e) {
$('.paging li a').removeClass("active");
$(this).find('a').addClass("active");
$('#img-grp-wrap img').hide();
var indexer = $(this).index();
$('#img-grp-wrap img:eq('+indexer+')').fadeIn();
e.preventDefault();
return indexer;
});
}
var $cur_page = paging();
console.log($cur_page);
我想在函数paging()之外使用索引器值,但是当我尝试执行console.log()时,它只是说 undefined 。
我如何构造它以便我可以传递我在函数外部点击的链接的索引值(这是索引器变量)?
我是一名编程新手,所以请耐心等待。
答案 0 :(得分:3)
听起来你真的不明白事件处理程序是如何工作的。当您安装单击处理程序时,您告诉系统您希望它在将来某个时间发生单击时调用此函数。在单击元素并调用匿名函数之前,函数paging()
运行并完成很长时间。因此,paging()
函数无法返回单击处理程序的结果,因为尚未发生单击。
如果你有一些想要使用indexer
值的代码,那么你需要从click处理程序调用该代码并将indexer
的值作为参数传递给你正在调用的函数。这可能看起来像这样:
$('.paging li').click(function(e) {
$('.paging li a').removeClass("active");
$(this).find('a').addClass("active");
$('#img-grp-wrap img').hide();
var indexer = $(this).index();
$('#img-grp-wrap img:eq('+indexer+')').fadeIn();
e.preventDefault();
// call a function and pass it the indexer value
processIndex(indexer);
});
注意,我还删除了分页功能,因为你不想多次调用它,因为它会再次安装你的事件处理程序。
答案 1 :(得分:1)
正如@jfriend00所说,由于它们的工作方式,您无法以您的思维方式访问事件处理程序的返回值。
但是,您当然可以让他们在外部(例如全局)范围内设置变量,然后让它们触发事件发生后需要运行的任何操作。或者,您可以将值作为参数传递给另一个函数。
E.g。
// Declare external variable outside event handler.
var pagingOutput;
function paging() {
$('.paging li').click(function(e) {
// Handle event...
pagingOutput = someValue;
actionToPerfomAfterPaging();
// Of course, you could also do something like this...
actionToPerformAfterPaging_2(someValue);
});
}
function actionToPerfomAfterPaging() {
doSomethingWithPagingOutput(pagingOutput);
}
function actionToPerfomAfterPaging_2(val) {
doSomethingWithPagingOutput(val);
}
var $cur_page = paging();
console.log($cur_page);
您无法从事件处理程序返回值的原因是该脚本在负责处理页面上其他所有内容的同一线程上运行。如果您理论上为事件处理程序设计了一种返回值的方法,则必须阻止该线程,直到事件触发为止。这意味着页面将冻结,直到与处理程序相关联的任何事件发生,例如,用户点击按钮。