2012-04-27 6 views
0

私のコードの問題点を教えてください。私は以下のすべてのセクションのコードを与えました。 HTML/CSS & JQueryJqueryがIDの問題を選択しています

私が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のコードはworkに見えますが、どのような場合には、ボタンではないコンテナへの選択を特定

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

から次の行を置き換えhttp://jsfiddle.net/EAcEC/、私のために働くようだ –

+0

あなたのコンソールですべてのエラーを? –

+0

私は、コンソールに '未定義関数$への呼び出し'があると思われます。 – Sampson

答えて

0

間違って何もすべてのもの結構です。 ちょうど頭

<script src="file://c:/jquery/chapter-2/begin/scripts/jquery.js" type="text/javascript"></script> 
このラインと

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

その作業..ツールをダウンロードした後、ブラウザを再起動する必要があります.. – user1050619

0

を提出。

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

メイクはパスが正しく、ロードされているようにスクリプトをロードしているあなたのコードによって判断

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

。さらに、あなたが絶対的ではなく相対的な道であれば良いでしょう。

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

上記のスニペットは、アクティブファイルと同じベースパスにjQueryスクリプトを含むフォルダがあることを示しています。

+0

イベントはコンテナに伝播するので、彼が何をしているはずです。 –

0

コードは問題ありません。おそらくjQueryがロードされていないと思われます。

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

また、ローカルのjsファイルも読み込まれていることを確認する必要があります。ファイルの参照に以下を使用し、

Webページがc:/jQuery/chapter-2/に現在ある場合:あなたは、いくつかの本の例を挙げて取り組んでいるように見えるので、あなたのリソースへの相対パスを使用することを検討して

<script src="begin/scripts/jquery.js"></script> 
関連する問題