正确的语法将我的jQuery脚本转换为可重用函数
正确的语法将我的jQuery脚本转换为可重用函数
提问于 2016-06-09 02:54:14
所以我有一个像这样的脚本：
$('.save-audition').on('click', function() {
STUFF HAPPENS HERE
})效果很好。但是，除了..save试镜之外，还有几个元素，我想使用相同的脚本，只有几个变量不同。通过四处搜索，我认为下面的方法是可行的，但它似乎做不到这一点。我应该使用的正确语法是什么？
$('.save-audition').on('click', tps_save_listing(audition));
$('.save-job').on('click', tps_save_listing(job));
function tps_save_listing(type) {
STUFF HAPPENS HERE
}回答 3
Stack Overflow用户
回答已采纳
发布于 2016-06-09 02:59:06
您将立即在tps_save_listing(audition)，tps_save_listing(job)调用函数，而不是传递对tps_save_listing函数的引用。您也可以使用event.data将变量传递给事件处理程序tps_save_listing。
$(".save-audition").on("click", null, audition, tps_save_listing);
$(".save-job").on("click", null, job, tps_save_listing);
function tps_save_listing(event) {
// STUFF HAPPENS HERE
console.log(event.data);
}
var audition = 123;
var job = "abc";
$(".save-audition").on("click", null, audition, tps_save_listing);
$(".save-job").on("click", null, job, tps_save_listing);
function tps_save_listing(event) {
console.log(event.data)
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="save-audition">
save audition
</div>
<div class="save-job">
save job
</div>
jsfiddle https://jsfiddle.net/p1gcxw5y/
Stack Overflow用户
发布于 2016-06-09 02:57:43
如果只希望像事件处理程序那样设计函数，则可以将该值作为数据传递如下
$('.save-audition').on('click', {
type: 'audition'
}, tps_save_listing);
$('.save-job').on('click', {
type: 'job'
}, tps_save_listing);
function tps_save_listing(event) {
snippet.log(event.data.type)
}<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="save-audition">1</div>
<div class="save-audition">2</div>
<div class="save-job">3</div>
<div class="save-job">4</div>
代码的问题是您正在立即调用该函数。
您也可以使用Function.bind()
$('.save-audition').on('click', tps_save_listing.bind(window, 'audition'));
$('.save-job').on('click', tps_save_listing.bind(window, 'job'));
function tps_save_listing(type) {
snippet.log(type)
}<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="save-audition">1</div>
<div class="save-audition">2</div>
<div class="save-job">3</div>
<div class="save-job">4</div>
Stack Overflow用户
发布于 2016-06-09 03:23:49
您所寻找的是所谓的函数应用程序。尝试下面的代码，然后我可以解释发生了什么。
$('.button1').on('click', applied(myFunction, ['foo']));
$('.button2').on('click', applied(myFunction, ['bar', ' bat']));
function myFunction(text1, text2) {
alert(text1);
if (text2)
alert(text2)
}
function applied(func, args) {
return function() {
func.apply(null, args);
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button1">Foo</button>
<button class="button2">Bar</button>
这里发生的事情是，当我们调用applied(myFunction, ['foo'])时，我们实际上创建了一个全新的匿名函数，其中包含了预先指定的参数。返回这个新的匿名函数，然后使用我们在触发'click‘事件时指定的参数调用原始函数。
在本例中，为了方便起见，我将该功能封装在一个名为“applied”的函数中。
这方面有更多的资源。
竞逐函数和部分函数
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37716057
复制相关文章
相似问题
腾讯云开发者
