Add jQuery in another's project


#1

Hi,

I wanted to add a jQuery function to another developper’s project. Just to change the anchor link’s CSS class when it is clicked. But no matter where I put my code in the JS document, it doesn’t work:

$(document).ready({
          $('.link').on('click', (event)=>{
          $(event.currentTarget).addClass('clicked');
            }
           })

Here is the original JS file that makes the page scroll slowly down instead of just pop to the right html targeted. And it works just perfectly:

$(function() {
    $('a[href*="#"]:not([href="#"])').click(function() {
      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') &&   location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
        if (target.length) {
          $('html, body').animate({
            scrollTop: target.offset().top
          }, 1000);
          return false;
        }
      }
    });
    });

Here is my bit of CSS:

.clicked{
  background-color: #8A2903;
  color: #fff;
}

Here is the HTML snippet:

<nav>
          <a href="#homeSection" class="link">Home</a>
          <a href="#aboutSection" class="link">About</a>
          <a href="#ticketSection" class="link">Ticket</a>
          <a href="#gallerySection" class="link">Gallery</a>
          <a href="#contactSection" class="link">Contact Us</a>
        </nav>

#2

Did you include jquery itself? And before the script where you attempt to use jquery?


#3

Yes! Everything works perfectly even the original JS code. No problem with the jquery script and JS file in HTML file.

But when I try to add my own JQuery it doesn’t work anymore. It screws up the JS


#4

that is really difficult to debug then without being able to reproduce the problem


#5

I copy pasted my JS but it is not very clear. Here is a screenshot:

I just want to add a new class to the anchor links of my HTML when they are clicked.
So where should I put my event handler?
Should I write $(document).ready({}) or this line is not necessary because they seem to have written jQuery without that line of code as you can see on the screenshot.

Here are the scripts:

Everything works fine until I try to change the JS

Thanks for the help!


#6

the moment i put the jquery code in jsbin, i get errors. It seems you use document ready incorrectly:

http://learn.jquery.com/using-jquery-core/document-ready/


#7

I don’t understand why there isn’t $(document).ready({}) in the original code, but it does work.

Then I don’t understand where to add my jQuery to modify an element’s class.


#8

because its raw JS code, and if you put this code at the end of the HTML file, the DOM is ready for manipulation.


#9

Oh ok… I thought it was jQuery code because of the $ sign.

I only finished jQuery course and haven’t started the advanced Js course. I guess I need to learn a bit more because I don’t know how to mix raw JS (vanilla JS I guess?) and jQuery


#10

the moment i put your code in a bin:

https://jsbin.com/luhawijiqu/edit?html,js,output

I get syntax highlight to indicate problems with your syntax, maybe you should tweak your editor to support jquery code detection?


#11

didn’t know I could do that. I work with Atom now. I will do that by adding a package. thanks!

I just added this snippet:

  $('.link').on('click', (event)=>{
     $(event.currentTarget).toggleClass('clicked')
       })

I just didn’t use the $(document).ready(()=>{}) method. And it works just fine.


#12

yep, because you didn’t use document.ready correctly, but i already mentioned this several replies ago:

your decision of using document.ready should be based on what it does.


#13

I thought .ready() was compulsory but I rewent through the lesson and it isn’t compulsory. It tells your browser that the parsing of the HTML doc is finished so it can move on to jQuery, something like this. Since it’s one line of code I told myself maybe it should work just fine without the ready method