CODEWITHSUNDEEP
jqueryevents
Lalien-Miles Lamar Coleman
Lalien-Miles Lamar Coleman

Reputation: 151

JQuery Events only affecting the first element?

Alright, so I am making a site using PHP. It's a site that allows users to log in and create flashcards to view online. I added in some JQuery for a slick design and it is looking much better.

However, I've reached a snag. I made a jQuery command that hides the answer and when you roll over the flashcard, it shows it. And it works... only for the first first flash card.

First, it would work out just fine... All of the answers are hidden. And when I roll over the first flash card, it shows my answer. However, for the others it doesn't work out that way. They just stay hidden.

Here is my code:

$(document).ready(function(){

        $('mark').hide();
        $('#card').mouseover(function() {
                $('mark',this).show();
        });
        $('#card').mouseout(function() {
                $('mark',this).hide();
        });
});

And here is the structure for each flashcard: 

<div id="card">
<p>Question is here!</p>
<mark> Answer is here! </mark>
</div>

What do you think I'm missing here?

If you want to play with it for yourself, here's my github: https://github.com/Lalien/Test_Site

Upvotes: 0

Views: 45

Answers (1)

Rohan
Rohan

Reputation: 3332

From a syntax perspective, first line should be $('#mark').hide();

And to answer your question, define 'card' as a class if you want the behaviour on multiple cards. A page can have multiple classes but only 1 ID from the perspective of javascript due to which all the divs with id as 'cards' except the first one are ignored.

Upvotes: 1

Related Questions