javascript - Extreamly simple HTML js code,but why doesn`t it work? -


i trying learn make simple quiz.so got script in stackoverflow.it works here http://jsfiddle.net/zy4gw/ ,but not when use ,here code

<html> <head> <title>learning how make quiz</title> <script type="text/javascript">  $(function(){  $('#q-and-a li a').each(function(){   $(this).click(function(){       $(this).siblings('div').slidetoggle(300);               });         });                  }); </script> </head>  <body>  <ul id="q-and-a">     <li><a>question one</a>     <div>answer question one...</div>   </li>      <li><a>question two</a>      <div>answer question two...</div>   </li> </ul>  <style>     ul { margin: 0; padding: 0; }     ul li { margin: 0; padding: 0; list-style: none; }     ul li { color: blue; }     ul li div { display: none; } </style>   </body> </html> 

why doesn`t run?

<!doctype html>  <html> <head> <title>learning how make quiz</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>                                    //you had not imported library required running jquery <script type="text/javascript">  $(document).ready((function(){                   $('#q-and-a li a').click(function(e){                $(this).next('div').slidetoggle(300);        //div child of li not sibling            });        }));       </script> </head>  <body>  <ul id="q-and-a">     <li><a >question one</a>     <div>answer question one...</div>   </li>      <li><a >question two</a>      <div>answer question two...</div>   </li> </ul>  <style>     ul { margin: 0; padding: 0; }     ul li { margin: 0; padding: 0; list-style: none; }     ul li { color: blue; }     ul li div { display: none; } </style>   </body> </html> 

your mistakes follows: 1) had not imported library required jquery 2) function using access div element div child element of li. accessing sibling of li.
3) no need of .each function access li separately


Comments

Popular posts from this blog

javascript - Chart.js (Radar Chart) different scaleLineColor for each scaleLine -

apache - Error with PHP mail(): Multiple or malformed newlines found in additional_header -

android - Go back to previous fragment -