April 27, 2012
Jquery on selecting id issue
Question by user1050619
Can you let me know what is the problem with my code. I have given the code for all the sections belowie; the HTML/CSS & JQuery
When I click my go veg button the class fish should hide.
CSS file
div{
display:inline;
float:left;
height:245px;
text-align:left;
border: solid #000 3px;
}
html file
<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 by Abdul
nothing wrong every thing is fine.
just replace following line from head
<script src="file://c:/jquery/chapter-2/begin/scripts/jquery.js" type="text/javascript"></script>
with this line
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
Answer by Starx
The code seems to work, but in any case pinpoint the selection to the buttons not the containers.
$(".buttons button").click(function(){
$("li.fish").hide();
});
Judging by your code, where you are loading scripts like
<script src="file://c:/jquery/chapter-2/begin/scripts/jquery.js" type="text/javascript"></script>
Make is the path is correct and is loaded. Further, It will be better if you relative path rather than absolutes.
<script src="scripts/jquery.js" type="text/javascript"></script>
The snippet above signifies, there is a folder with jQuery script, on the same base path as the active file.
