2012-04-27 62 views
0

你能告訴我我的代碼有什麼問題。我給出了以下所有部分的代碼; HTML/CSS & JQuery關於選擇ID問題的jquery

當我點擊我的go veg按鈕時,類魚應該隱藏起來。

CSS文件

div{ 
display:inline; 
float:left; 
height:245px; 
text-align:left; 
border: solid #000 3px; 
} 

HTML文件

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="file://c:/jquery/chapter-2/begin/styles/my_style.css" /> 
    <script src="file://c:/jquery/chapter-2/begin/scripts/jquery.js" type="text/javascript"></script> 
    <script src="file://c:/jquery/chapter-2/begin/scripts/my_scripts.js" type="text/javascript"></script> 
</head> 

<body> 
<div class="topper"> 
    <h2>Our Menu</h2> 
     <div class="buttons"><button type="submit" value="vegon">Go Vegetarian</button></div> 
     <div class="buttons"><button type="submit" value="restoreme">Restore Menu</button></div> 
</div> 
<div class="middle"> 
<li>Thai-style Halibut 
<ul class="menu_list"> 
    <li     >coconut milk</li> 
    <li class="fish" >pan-fried halibut</li> 
    <li     >lemongrass broth</li> 
    <li     >vegetables</li> 
    <li     >Thai spices </li> 
</ul> 
</li> 
<li>Braised Delight 
<ul class="menu_list"> 
    <li class="meat" >lamb shoulder</li> 
    <li     >cippolini onions</li> 
    <li     >carrots</li> 
    <li     >baby turnip</li> 
    <li     >braising jus</li> 
</ul> 
</li> 
<li>House Grilled Panini 
<ul class="menu_list"> 
    <li class="meat" >prosciutto</li> 
    <li     >provolone</li> 
    <li     >avocado</li> 
    <li     >cherry tomatoes</li> 
    <li     >sourdough roll</li> 
    <li     >shoestring fries </li> 
</ul> 
</li> 
<li>House Slider 
<ul class="menu_list"> 
    <li     >eggplant</li> 
    <li     >zucchini</li> 
    <li class="hamburger">hamburger</li> 
    <li     >balsamic vinegar</li> 
    <li     >onion</li> 
    <li     >carrots</li> 
    <li     >multigrain roll</li> 
    <li     >goat cheese</li> 
</ul> 
</li> <li>Frittata 
<ul class="menu_list"> 
    <li class="meat" >eggs</li> 
    <li     >Asiago cheese</li> 
    <li     >potatoes </li> 
</ul> 
</li> 
<li>Coconut Soup 
<ul class="menu_list"> 
    <li     >coconut milk</li> 
    <li class="meat" >chicken</li> 
    <li     >vegetable broth</li> 
</ul> 
</li> 
<li>Soup Du Jour 
<ul class="menu_list"> 
    <li class="meat" >grilled steak</li> 
    <li     >mushrooms</li> 
    <li     >vegetables</li> 
    <li     >vegetable broth </li> 
</ul> 
</li> 
<li>Hot and Sour Soup 
<ul class="menu_list"> 
    <li     >roasted pork</li> 
    <li     >carrots</li> 
    <li     >Chinese mushrooms</li> 
    <li     >chili</li> 
    <li     >vegetable broth </li> 
</ul> 
</li> 
<li>Avocado Rolls 
    <ul class="menu_list"> 
    <li     >avocado</li> 
    <li     >whole chiles</li> 
    <li     >sweet red peppers</li> 
    <li     >ginger sauce</li> 
</ul> 
</li> 
</div> 
</body> 
</html> 

JS文件

$(document).ready(function() { 
    $(".buttons").click(function(){ 
    $("li.fish").hide(); 
}); 
}); 
+1

似乎爲我工作,http://jsfiddle.net/EAcEC/在控制檯 – 2012-04-27 20:51:12

+0

任何錯誤,從頭部

<script src="file://c:/jquery/chapter-2/begin/scripts/jquery.js" type="text/javascript"></script> 

線? – 2012-04-27 20:53:20

+0

我懷疑在控制檯會有'未定義函數$'的調用。 – Sampson 2012-04-27 20:55:03

回答

0

無可厚非的每一件事很好。 只需更換下面這條線

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
+0

其工作..我需要在下載工具後重新啓動瀏覽器.. – user1050619 2012-05-01 17:25:26

0

代碼似乎work,但在任何情況下精確定位的選擇的按鈕不是容器。

$(".buttons button").click(function(){ 
    $("li.fish").hide(); 
}); 

您的代碼來看,你在哪裏加載喜歡

<script src="file://c:/jquery/chapter-2/begin/scripts/jquery.js" type="text/javascript"></script> 

製作腳本的路徑是正確的和被加載。此外,如果你是相對路徑而不是絕對路徑,它會更好。

<script src="scripts/jquery.js" type="text/javascript"></script> 

上面的代碼片段表示,存在一個jQuery腳本文件夾,與活動文件在同一個基本路徑上。

+0

事件將傳播到容器,所以他有什麼應該工作。 – 2012-04-27 20:52:07

0

你的代碼沒問題。我懷疑你可能沒有加載jQuery。嘗試將您的本地參考文件換成Google CDN文件:

https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js 

您還必須確保您的本地js文件也已加載。您似乎是通過一些書的例子來工作,所以請考慮使用你的資源相對路徑:

如果你的網頁目前在c:/jQuery/chapter-2/,使用下面爲您的文件引用:

<script src="begin/scripts/jquery.js"></script>