Question

我在控制台中收到此错误：未捕获TypeError：$（...）。click（...）不是函数，我不确定错误在哪里。代码似乎没问题。我还添加了html文件。

HTML

<section>
<div class="fu-ripple-effect">
    <header><h2>hello world</h2>
    <p>hello world paragraph</p>
    </header>
</div>
  </section>

JS

var parent, ink, d, x, y;
$("section .fu-ripple-effect").click(function(e) {
    parent = $(this).parent();
    //create .ink element if it doesn't exist
    if (parent.find(".ink").length == 0)
        parent.prepend("<span class='ink'></span>");

    ink = parent.find(".ink");
    //incase of quick double clicks stop the previous animation
    ink.removeClass("animate");

    //set size of .ink
    if (!ink.height() && !ink.width()) {
        //use parent's width or height whichever is larger for the diameter to make a circle which can cover the entire element.
        d = Math.max(parent.outerWidth(), parent.outerHeight());
        ink.css({
            height: d,
            width: d
        });
    }

    //get click coordinates
    //logic = click coordinates relative to page - parent's position relative to page - half of self height/width to make it controllable from the center;
    x = e.pageX - parent.offset().left - ink.width() / 2;
    y = e.pageY - parent.offset().top - ink.height() / 2;

    //set the position and add class .animate
    ink.css({
        top: y + 'px',
        left: x + 'px'
    }).addClass("animate");
})

Answer 1

您可能需要做三件事：

您需要导入jQuery
您需要添加$(document).ready(function() {...});
您需要结束以下块：

$(...).click(function() {}) 使用分号。

示例：

$(document).ready(function() {
  // put jQuery code here
  $('.foo').click(function() {
    $('.foo').fadeOut(1000);
  });
});

<!--Importing jQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="foo">bar</div>

我的涟漪效应的控制台错误：未捕获TypeError：$（...）。click（...）不是函数

1 个答案: