CODEWITHSUNDEEP
jquery
Shunter1112
Shunter1112

Reputation: 623

jQuery don't run on my local server

I have wrote this code on my local server (Installed Apache 2 on my Mac with MacPorts) but It haven't run.

JavasSript is active on Safari or Firefox, but it haven't do on these. Is this code worse? Or I can try other way? Please help. 

<html>
<head>
  <title> jquery test </title>
   <script src="http://www.google.com/jsapi"></script>
   <script>
     // Load jQuery
     google.load("jquery", "1");
   </script>

   <script type="text/javascript">
    JQuery(function($){
     var $curr = $(".sel");
     $("button").click(function(){
      $curr.removeClass("sel");
      $curr.$curr.prev().addClass("sel") 
     });
    });
   </script>
   <style type="text/css">
   span { padding :8px;}
   .sel { border :orange solid 4px;}
   </style>
      </head>
      <body> 
   <p>
    <span>1</span>
    <span>2</span>
    <span class="sel">3</span>
    <span>4</span>
    <span>5</span>
    <button>click</button>
   </p>
</body>
</html>

Upvotes: 0

Views: 440

Answers (2)

Nick Craver
Nick Craver

Reputation: 630359

It should be jQuery instead of JQuery, you'll get a JavaScript error calling a variable that doesn't exist :)

Also this has an extra $curr:

$curr.$curr.prev().addClass("sel")

It should just be:

$curr.prev().addClass("sel")

You can see a version with both of these fixes here

If you always want to move back one, you need to move your selector inside the click, instead of always referring to the original element that had class="sel", like this:

jQuery(function($){
  $("button").click(function(){
    $(".sel").removeClass("sel").prev().addClass("sel");
  });
});​

You can test it here

Upvotes: 4

Razor Storm
Razor Storm

Reputation: 12326

To help you debug, both safari and firefox has javascript error/output logs. On firefox press control shift j to open up the console, here you can see what went wrong.

Upvotes: 0

Related Questions