Question

所以我的脚本结构如下：

$('.save-audition').on('click', function() {
    STUFF HAPPENS HERE
})

它运作良好。但是，除了.save-audition之外还有几个元素，我想使用相同的脚本，只有几个变量不同。通过搜索，我认为下面的工作，但它似乎没有做到这一点。我应该使用的语法是什么？

$('.save-audition').on('click', tps_save_listing(audition));
$('.save-job').on('click', tps_save_listing(job));

function tps_save_listing(type) {
    STUFF HAPPENS HERE
}

Answer 1

如果您只想将函数设计为事件处理程序，那么您可以将值作为数据传递，如

$('.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>

Answer 2

您要寻找的是功能应用程序。试试下面的代码，然后我就可以解释发生了什么。

$('.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'的函数中。

有关此的更多资源。

Currying and Partial Functions

MDN on Function.prototype.apply

Answer 3

您正在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);
}

＆＃13;

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)
}

＆＃13;

<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>

＆＃13;

jsfiddle https://jsfiddle.net/p1gcxw5y/

正确的语法将我的jQuery脚本转换为可重用的函数

3 个答案: