freeCodeCamp Challenge Guide: Target Elements by Class Using jQuery

Guide
1

Target Elements by Class Using jQuery

  • You can find elements with the jQuery class selector. // $(.className)
  • In this example, It allows you to select elements with the class “.well”

Solutions

Solution 1 (Click to Show/Hide) 
<script>
  $(document).ready(function() {
    $(".well").addClass("animated bounce");
    $(".well").addClass("shake");
  });
</script>

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>
8 Likes
2

why did we use no period/full stop (“button”) for the button element and used it in selecting the well element ("**.**well")

7 Likes
3

Try this----
“addClass” is case sensitive as:
JavaScript is case-sensitive: tolowercase() won’t work, it must be toLowerCase().

In fact, every language taught on Codecademy is case-sensitive. Exception, / tag names don’t care about case, but HTML is a markup, not a programming language.

1 Like
4

its because the “button” is the html element while the “.well” is class inside the div.
I was also confused at this first

7 Likes
5

Many thanks to both of you :slight_smile:
This comes to my mind when I faced with challenge.

6

hey, guys, My seem not work well. anyone can give the clue? please help me out on this section, kinda stuck-in, thanks!

7

yes, thanks! it must be CAPS CASE, with Class, otherwise, wont work.

8

Thank you very much
You have helped me, very case sensitive