Question

这看起来很简单，但我找不到 jQuery 函数来处理这个问题。

例如，

$('div').show().sayHi()

function sayHi(obj) {
    obj.html('hi')
}

sayHi()不是 jQuery 函数，因此无法在此上下文中调用它。您需要将其称为：

var $div = $('div').show()
sayHi($div)

但我希望它作为链条的一部分，主要是因为它看起来更好。

的解决方案： 的

Barmar的答案最能回答这个具体问题，但我的实施是一个更可重复使用的选项，如my answer below.

所示

Answer 1

您可以通过将其定义为$.fn的属性来添加自己的jQuery方法。所以你可以写：

＆＃13;

$.fn.sayHi = function() {
  this.html('Hi');
  return this;
}

$("#click").click(function() {
  $("#foo").show().sayHi();
});

＆＃13;

#foo {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="click">Click me</button><br>
<div id="foo"></div>

＆＃13;

按照惯例，不返回与对象相关的信息的jQuery方法应返回this，以便它们可以继续链接。

Answer 2

创建一个自定义 jQuery 函数，该函数接受一个函数来调用并调用它。返回此将允许在自定义函数之后进行进一步链接。

此解决方案使用Function.prototype.apply()允许传入任意数量的参数。（根据Barmar的建议添加。）

$.fn.custom = function(f) {
  var fnToCall = f; //array shift below makes our param undefined
  [].shift.apply(arguments); //first param is the function, which don't want to pass 
  return fnToCall.apply(this, arguments);
}

$('#btnRun').click( () => {
  $('div').empty()
          .custom(sayHi, "test", "ing")
          .custom(sayHi, ' ', 'a', ' ', 'lot ')
          .custom(sayHi, 'of', ' params ')
})


function sayHi(...args) {
    var $obj = $(this)
    $obj.html($obj.html().concat(...args))
    return this
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='btnRun'>Test </button>

<div>
</div>

这是我最终实现的解决方案，因为我想要一个可重用的功能。它没有完全回答这个问题，这就是它没有被标记为答案的原因。

Answer 3

你错了你所要求的。通过语法，obj.foo().bar()表示：在obj上调用foo。现在，获取该调用的返回值和调用栏。您可能在JavaScript JQuery's Promise pattern中看到过这种情况。 promise对象用一个调用方法实例化，并可以通过它的done / then / fail方法与其他方法链接。延迟（延迟）执行时，通常使用，但是通过扩展行为（超时，重试等）一般可以扩展某些类型的操作。

小心使用。大多数情况都不会要求这样做，你的同伴也不会理解你在做什么，除非你把事情做好了封装。

如何将自定义函数作为jQuery函数链的一部分来调用

3 个答案: