0

你能告诉我我的代码有什么问题吗?我已经给出了以下所有部分的代码;HTML/CSS 和 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();
});
});
4

3 回答 3

0

该代码似乎有效,但无论如何将选择精确到按钮而不是容器。

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

从您的代码来看,您正在加载脚本,例如

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

Make是路径正确并且被加载。此外,如果您使用相对路径而不是绝对路径会更好。

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

上面的代码片段表示,有一个带有 jQ​​uery 脚本的文件夹,与活动文件位于相同的基本路径。

于 2012-04-27T20:50:32.570 回答
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>
于 2012-04-27T20:52:04.343 回答
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>
于 2012-04-27T20:57:08.400 回答