Question

您能告诉我我的代码有什么问题吗？我给出了以下所有部分的代码; HTML / CSS＆amp; JQuery的

当我点击我的去蔬菜按钮时，班级鱼应该隐藏。

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 file

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

Answer 1

代码似乎是work，但无论如何都要精确定位按钮而不是容器。

$(".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>

上面的代码段表示，有一个带有jQuery脚本的文件夹，与活动文件位于同一个基本路径上。

Answer 2

你的代码很好。我怀疑你可能没有加载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>

Answer 3

没有错，每件事都没问题。只需从头部替换以下行

<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>

关于选择id问题的Jquery

3 个答案: