CSS3 Card Flip, Jquery returns undefined function

Question

Simple problem, but can't figure it out. The following basic lines of jquery are not cooperating with me. Browser returns following error: Uncaught TypeError: undefined is not a function

$('.flip').click(function() {
    document.find('#card').addClass('flipped');
});

All the classes and ids called exist in the docs. No problems there.

Answer 1

Remove document and find from document.find('#card').addClass('flipped'); as you don't need that.

  $('.flip').click(function() {
        $('#card').addClass('flipped');
    });

demo:

http://code-chunk.com/chunks/543b7d86025c1/flip-it

Answer 2

You will get undefined is not a function error whenever jquery not able to find element using specified selector and you call any function on it ie for function calling on undefined object.

You should use find() with document like below

$('.flip').click(function() {
    //wrap document inside $()
    $(document).find('#card').addClass('flipped');
});

But as you are trying to find using id ( which must be unique through out the DOM ), then use id selector directly instead of find()

$('.flip').click(function() {
    $('#card').addClass('flipped');
});

Answer 3

由于您通过id引用元素，因此可以直接调用它：

$('#card').addClass('flipped');