Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Karen Freeman-Smith
Karen Freeman-Smith
29,248 Points

Help with jQuery selector?

I'm trying to improve a this website (https://github.com/karenfreemansmith/hello-world) by making flashcards. I'm having trouble narrowing down the jQuery selector to turn over just ONE card at a time (right now it turns them all over when you click one).

Each card is added to the page when it loads as a div with class="card" and an id=(the language)

function uiDisplayCards(languages, key) {
  var linkHTML = "";
  languages.forEach(function(language) {
    linkHTML += "<div class='card' id='"+language.language[1]+"'><span class='sidea'><strong>"+language.language[0]+"</strong></span><span class='sideb'>"+language[key][0]+"</span></div>";
  });
  document.getElementById("languages").innerHTML=linkHTML;
}

Then I try to toggle the cards when a div is clicked:

$("div").click(function() {
  $(".sidea").toggle();
  $(".sideb").toggle();
});

I've tried "this" and using ".card" and "div.cart" as the selector, but nothing seems to work. Most of it breaks the click function completely. Any other ideas, or pointers to where I can find a better selector for the click would be appreciated!

3 Answers

Chyno Deluxe
Chyno Deluxe
16,936 Points

@Joel Bardsley has the right idea. The only thing I want to add to his answer is you would need to then move the click function inside of the uiDisplayCards() method.

Because the cards are entered in dynamically, they are non-exsistant until the browser has recieved the response from your Http request and the uiDisplayCards method is fired.

function uiDisplayCards(languages, key) {
    var linkHTML = "";
    languages.forEach(function(language) {
        linkHTML += "<div class='card' id='" + language.language[1] + "'><span class='sidea'><strong>" + language.language[0] + "</strong></span><span class='sideb'>" + language[key][0] + "</span></div>";
    });
    document.getElementById("languages").innerHTML = linkHTML;

    $(".card").click(function() {
        $(this).find(".sidea").toggle();
        $(this).find(".sideb").toggle();
    });
}

I hope this helps.

Karen Freeman-Smith
Karen Freeman-Smith
29,248 Points

Moving it worked. I would never have thought to move the code inside of that function. Thanks!

Chyno Deluxe
Chyno Deluxe
16,936 Points

Glad I could help.

Simon Coates
Simon Coates
28,695 Points
Simon Coates
Simon Coates
28,695 Points

Just a demo, of what i assume you're trying to do:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div>aaaa</div>
<div>abba</div>
<script>
$("div").click(function() {

    $(this).toggle();
});
</script>

(update: i didn't read the problem closely enough. I assumed you were looking to jquery methods on this (this.toggle as opposed to $(this).toggle ). Anyhow, i think Joel is probably right)

Joel Bardsley
Joel Bardsley
31,258 Points
Joel Bardsley
Joel Bardsley
31,258 Points

I think using .card as the selector and "this" would be the best way to do it, then finding and toggling the descendant elements of the particular card. Something like:

$(".card").click(function() {
  $(this).find(".sidea").toggle();
  $(this).find(".sideb").toggle();
});
Karen Freeman-Smith
Karen Freeman-Smith
29,248 Points

This was my original thought, although with .attr() rather than .find(). Problem is that the ".card" doesn't seem to work. I put an alert statement in the function as well, and get NOTHING when I click, not even the pop-up. :(