javascript - 不能在 JQuery 中使用创建的函数

Question

我的问题是我无法使用我创建的函数。你可以看到下面的代码。我收到“不是函数错误”。

var alteropacity = function () {                 //creating function
    if ($(this).css('opacity') < '0.90') {
        $(this).css('opacity', '1.00');
    }
    else {
        $(this).css('opacity', '0.20');
    }
    return $(this);
};
$("#image").on("click", function () {           //using it
    $(this).alteropacity(); 
});

Answer 1

要使函数作为 jQuery 方法可用，您必须向 $.fn 添加一个属性:

$.fn.alteropacity = alteropacity;

在函数声明之后添加它(在事件处理程序之外)。

现在，虽然您的代码可以工作，但如果您真的想要创建一个 jQuery 方法，它应该遵循约定(如果这对函数的目的有意义)。在这种情况下，它只是意味着迭代:

var alteropacity = function () {
    return this.each(function() {
      if ($(this).css('opacity') < '0.90') {
        $(this).css('opacity', '1.00');
      }
      else {
        $(this).css('opacity', '0.20');
      }
    });
};

这样，如果您要执行类似的操作，该方法就会起作用

$(".common-class").alteropacity();

也就是说，如果您要使用该函数来影响许多元素。另请注意，在 jQuery 方法中，this 指的是调用该方法的 jQuery 对象。再次包装它并没有坏处 ($(this)) 但您不必这样做。然而，在 .each() 迭代中，您回到了熟悉的领域，因此回调中的 this 将引用所涉及的元素。