顯示/隱藏div無法正常工作

我有一個問題讓我的div顯示在選擇從下拉菜單中，我得到$ is not defined我調整了我的代碼，沒有重複的ID。當我加載頁面時，它會顯示所有3個div，但只要我從下拉列表中選擇一個選項，它們就會全部隱藏。顯示/隱藏div無法正常工作

JS：

$(document).ready(function(){ 
    $('#requiredOption').change(function(){ 
     $('#newwebsiteDiv,#websiteredevelopmentDiv,#otherDiv').hide(); 
     $(this).find('option:selected').attr('id') + ('Div').show(); 
    }); 
});

HTML：

<!DOCTYPE html> 
<head> 
    <meta charset="utf-8"> 
    <title>Template 2011</title> 
    <link rel="stylesheet" href="_assets/css/style.css"> 
</head> 
    <body> 
     <header> 
      <div id="logo">Template Here</div> 
       <nav> 
        <ul> 
         <li><a href="/">Home</a></li> 
         <li><a href="#">About Me</a></li> 
         <li><a href="quote.html">Free Quote</a></li> 
         <li><a href="#">Showcase</a></li> 
         <li><a href="#">Contact Me</a></li> 
        </ul> 
       </nav> 
     </header> 
         <section id="content"> 
      <h1>Free Quote</h1> 
       <p>Please fill out the below questionnaire to receive your free web development quote</p> 
        <form action="" method="post" accept-charset="utf-8"> 
         <select name="requiredOption" id="requiredOption"> 
          <option id="pleaseselect" value="pleaseselect">Please Select Your Required Quote</option> 
          <option id="newwebsite" value="newwebsite">New Website</option> 
          <option id="websiteredevelopment" value="websiteredevelopment">Website Redevelopment</option> 
          <option id="other" value="other">Other</option> 
         </select> 
         <p><input type="submit" value="submit"></p> 
        </form> 
         <section id="newwebsiteDiv"> 
          <p>New Website</p> 
         </section> 
          <section id="websiteredevelopmentDiv"> 
           <p>Website Redevelopment</p> 
          </section> 
           <section id="otherDiv"> 
            <p>Other</p> 
           </section> 

</section> 
      <section id="sidebar"> 
     <div id="box_one"> 
      <p>Box One</p> 
     </div> 
     <div id="box_two"> 
      <p>Box Two</p> 
     </div> 
     <div id="box_three"> 
      <p>Box Three</p> 
     </div> 
     </section>  
      <footer> 
       <p>This is the footer</p> 
      </footer> 
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script> 
      <script src="_assets/js/js.js" type="text/javascript"></script> 
</body>

來源

2011-09-19 Jess McKenzie

移動你的JS文件的HEAD –

的jQuery和js文件導入的事情是確定的; 首先，你的代碼不包含任何元素包含id爲「選擇」。你的隱藏代碼想 '伊萬'

$（ '＃newwebsite，＃websiteredevelopment，其他＃'）隱藏（）。所以你的代碼應該是這樣的：

$(document).ready(function(){ 
    $('#requiredOption').change(function(){ 
     $('#newwebsiteDiv,#websiteredevelopmentDiv,#otherDiv').hide(); 
     var targetDiv=$(this).find('option:selected').attr("id")+"Div" 
     $("#"+targetDiv).show(); 
    }); 
});

來源

2011-09-19 02:40:01 coonooo

我剛剛說了幾句話:)但它仍然沒有顯示出於某種原因的股利。 –

我已經更新了我的問題 –

從上面的代碼chrome拍攝，不會改變http://cl.ly/1Y1h1o0B10143E103Q0d –

把jQuery的包括在<head>。

也：

$('#newwebsite','#websiteredevelopment','#other').hide();

應該是：

$('#newwebsite, #websiteredevelopment, #other').hide();

來源

2011-09-19 02:23:56 evan

謝謝，我已經這樣做了，但它仍然沒有工作，它應該在頁腳中使用

顯示/隱藏div無法正常工作

回答

相關問題