无法在JQuery中使用已创建的函数

My problem is that I cannot use the function I have created. You can see the codes below. I am getting a "not a function error".

我的问题是我无法使用我创建的功能。您可以看到以下代码。我得到一个“不是功能错误”。

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

1 个解决方案

#1

To make a function available as a jQuery method, you have to add a property to $.fn:

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

$.fn.alteropacity = alteropacity;

Add that right after the function declaration (outside the event handler).

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

Now, while your code will work, if you really want to make a jQuery method it should follow convention (if that's meaningful for the function's purpose). In this case, it just means iterating:

现在,虽然你的代码可以工作,但如果你真的想要制作一个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');
      }
    });
};

That way the method will work if you were to do something like

这样,如果您要做类似的事情,该方法将起作用

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

That is, if you were to use the function to affect many elements. Also note that in a jQuery method this refers to the jQuery object for which the method is being invoked. It doesn't hurt to wrap it again ($(this)) but you don't have to. Inside the .each() iteration, however, you're back in familiar territory so this inside that callback will refer to the elements involved.

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

#1