12. this


#1

Hello,

This is a link to the exercise I’m having trouble with: https://www.codecademy.com/courses/learn-javascript/lessons/javascript-dom/exercises/this?action=lesson_resume&link_content_target=interstitial_lesson

This is a link to exactly the same question I have with the same code: Lesson 12/16 $(this).toggleClass('active'); - not working for me

I don’t understand the solution given. Neither .next() nor .slideToggle(‘fast’) were covered in this exercise so I’m wondering how to get the correct code with just changing the selector to $(this).


#2

Which code are you using (please post it)?


#4

No introductory course can touch on all the details, so background reading is pretty much a must. Look up any keywords you do not recognize or understand on learn.jquery.com.

jQuery Code
function main() {
  var $skillset = $('.skillset');
  var $projects = $('.projects');
  var $projectsButton = $('.projects-button');
  $skillset.hide().fadeIn(1000);
  $projects.hide();
  $projectsButton.on('click', function() {
    $(this).toggleClass('active')
           .text('Projects Viewed')
           .next().slideToggle(400);
    if (!$(this).hasClass('active')) {
      $(this).text('Recent Projects');
    }
  });
}

$(document).ready(main);

#5

For this particular exercise in the “12. this” lesson, you don’t need .next() or .slideToggle('fast');. Both of those will be covered in later lessons.

Instead, let’s go back to the instructions.

Instruction #1

Using the code from the previous exercise, you want to change the .toggleClass to use $(this). Look at the example they give you in the lesson.

Why - because changing it to $(this) makes it target the specific button that was clicked. It’s no longer changing ALL of the buttons like the previous exercise. Now, it’s only changing the one you click.

Therefore, $(this) is referring to the button that was clicked.

Instruction #2

Run the code and then click on the individual buttons. Notice that only that button you clicked turns colors.


#6