-2

So I am trying to use some jQuery on a site I am building, but nothing seems to get it working.

Here is how I have the files linked in my html:

<head>
    <title>Eddy: Designer</title>
    <link rel="stylesheet" type="text/css" href="main.css"/>
    <script language="javascript" type="text/javascript" src="jquery.js"></script>
    <script src="script.js"></script>
</head>

Then in my javascript document "script.js" I have this code:

$(document).ready(function () {
"use strict";
$('#branding').click(function () {
    $('.branding').removeClass('.hidden');
    $('.ui').addClass('.hidden');
    $('.logos').addClass('.hidden');
    $('.print').addClass('.hideen');
});
$('#ui').click(function () {
    $('.branding').addClass('.hidden');
    $('.ui').removeClass('.hidden');
    $('.logos').addClass('.hidden');
    $('.print').addClass('.hideen');
});
$('#logos').click(function () {
    $('.branding').addClass('.hidden');
    $('.ui').addClass('.hidden');
    $('.logos').removeClass('.hidden');
    $('.print').addClass('.hideen');
});
$('#print').click(function () {
    $('.branding').addClass('.hidden');
    $('.ui').addClass('.hidden');
    $('.logos').addClass('.hidden');
    $('.print').removeClass('.hideen');
}); });

My code editing software says that my $(document).ready is using a '$' before it is defined... I have no idea what that means or if that is what is causing me these issues.

The idea is, when I addClass '.hidden' it will make every image that ISN'T the category that the button is labeled go to 50% opacity. This would in a sense "highlight" all the items that are "branding" or what have you.

I have been looking at tutorials about using jQuery, and I can't find what is going wrong. Please help. I am stressing myself out over this.

I tried linking the jQuery like this: 

        <link rel="stylesheet" type="text/css" href="main.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="script.js"></script>

This did not fix my problem. Is my jQuery code written incorrectly and that's why it isn't functioning? It seems like I am loading the jQuery properly, but it still doesn't work.

Ed117
  • 39
  • 1
  • 6
  • 3
    I'm not sure if this is a Java question as it looks to involve Javascript only and not Java. Are you sure about your use of the [tag:java] tag? Please correct me if I'm wrong, but note that if you mis-tag your question you will not get the right experts in to review it, and that this may hurt your chances of getting decent help. – Hovercraft Full Of Eels Jan 17 '15 at 22:33
  • if `$` is coming up indefined it means your jQuery library is not loading properly, (or it's loading after your script but that doesnt seem to me the case in your code above). Check that your paths are correct – jmore009 Jan 17 '15 at 22:34
  • 1. What does "use strict" stays for? 2. Editing software? But did u try this in a browser window? – lolbas Jan 17 '15 at 22:36
  • 1
    @lolbas "use strict" is a valid JavaScript "directive" or "command" (not sure of the exact term). http://stackoverflow.com/questions/1335851/what-does-use-strict-do-in-javascript-and-what-is-the-reasoning-behind-it – peter.petrov Jan 17 '15 at 22:40
  • 1
    You're going to have to do some basic debugging before we can usefully help you. First off, is jQuery being loaded? In your developer tools console, just type `jQuery` and see if you get anything. If not, check your path to jQuery. Your IDE main complain about `$` being undefined... that's no bother if it actually is defined. Now that you have jQuery loaded, put a breakpoint or `console.log()` statement in your document ready handler. Is it getting hit? Next, see if your elements exist. etc. etc. Help us help you. – Brad Jan 17 '15 at 22:40
  • As far as using the java tag, I apologize as I didn't know the difference. (I am very new at this. Thanks for noticing) I typed in "jQuery" into my developer tools console and it returned "jQuery function (a,b){return new n.fn.init(a,b)}" – Ed117 Jan 17 '15 at 22:48
  • In your "click" events, add something like alert("test") to assist with debugging. Check to see if it's firing. As others have said, you're passing periods in with your addClass/removeClass. – matcartmill Jan 17 '15 at 23:12

1 Answers1

1

First you have dots in removeClass and addClass method. You need to pass only class names not .classname, only classname. And as other sad you should check your folder structure and try loading jQuery from some CDN.

In your CSS you have #branding and in HTML and JS it's a class. And you are adding classes the wrong way you in HTML. Multiple classes are separated by spaces in class attribute like:

class="one two"

not like class="one" class="two"

Try this fiddle , it's working xD, I have just commented opacity and use outline: solid 2px red;. So you could better see changes when clicked.

IGRACH
  • 3,506
  • 6
  • 33
  • 48
  • Tried loading jQuery from a CDN and still none of my jQuery code is working. – Ed117 Jan 17 '15 at 22:52
  • Can you make [jsfiddle.net](http://jsfiddle.net/) of your code. It's hard to debug without html and css. Maybe you have problem this naming of things because you have classes and id named same, or something else. And you should use [.on() method](http://api.jquery.com/on/) instead if .click() – IGRACH Jan 17 '15 at 23:11
  • http://jsfiddle.net/dvkrzv7y/2/ Here is the jsfiddle of all my code. I hope this helps. I'm desperate for a solution here. – Ed117 Jan 17 '15 at 23:20
  • Your solution worked somewhat. I removed the "." when passing the .addClass "hidden" which fixed some of the problems. "#branding" and ".branding" were intentionally set as an id and a class. "#branding" was the link that would make everything but ".branding" hidden. So that wasn't a problem. The use of multiple classes in html was fixed. The loading of my jQuery was fine. I made a couple typos in my javascript, so that was fixed. Now everything is working. You help was key in getting all this working. Thank you. – Ed117 Jan 18 '15 at 03:50