另一个jQuery问题......我已经使用“class”和“id”元素多次尝试过这个问题，我无法做到这一点。我希望stackoverflow上的大脑可以帮助你！
我遇到的问题是当我打开页面时，所有元素都被关闭了。当我点击一个链接时，所有链接都会打开。我相信它正确关闭问题是，当我打开第一个链接所有项目打开。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bid Items</title>
<link href="bid.css" rel="stylesheet" type="text/css" />
<script src="jquery/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#showhideconent').hide();
$('a').click(function(){
$('#showhideconent').show('slow');
});
$('a#close').click(function(){
$('#showhideconent').hide('slow');
})
});
$(document).ready(function(){
$('#showhideconent2').hide();
$('a').click(function(){
$('#showhideconent2').show('slow');
});
$('a#close2').click(function(){
$('#showhideconent2').hide('slow');
})
});
$(document).ready(function(){
$('#showhideconent3').hide();
$('a').click(function(){
$('#showhideconent3').show('slow');
});
$('a#close3').click(function(){
$('#showhideconent3').hide('slow');
})
});
$(document).ready(function(){
$('#showhideconent4').hide();
$('a').click(function(){
$('#showhideconent4').show('slow');
});
$('a#close4').click(function(){
$('#showhideconent4').hide('slow');
})
});
</script>
</head>
<body class="oneColElsCtr" onload="MM_preloadImages('Assignment4b.jpg')">
<div id="container">
<div id="mainContent">
<h1>Bid Page</h1>
<h1>Coke Memorbila</h1>
<a href="#" id="click">Amber Bottle 1914</a>
<div id="box" align="center">
<div id="showhideconent">
<p><a href="coke/Amber1914.shtml"><img src="amber1914.jpg" width="200" height="200" alt="Amber Coke" /></a></p>
<p><a href="#" id="close">Close</a> </p>
</div>
</div>
<a href="#" id="click">Amber Bottle 1915</a>
<div id="box" align="center">
<div id="showhideconent2">
<p><a href="coke/Amber1915.shtml"><img src="coke/Amber1914.shtml" width="200" height="200" alt="Amber Bottle 1915" /></a></p>
<p><a href="#" id="close2">Close</a> </p>
</div>
</div>
<a href="#" id="click">Green 1929</a>
<div id="box" align="center">
<div id="showhideconent3">
<p><a href="coke/green1929.shtml"><img src="green1929.jpg" width="200" height="200" alt="Green 1929" /></a></p>
<p><a href="#" id="close3">Close</a> </p>
</div>
</div>
<a href="#" id="click">1970s Cans</a>
<div id="box" align="center">
<div id="showhideconent4">
<p><a href="coke/tincans.shtml"><img src="coke_tincan.jpg" width="200" height="200" alt="Tin Cans" /></a></p>
<p><a href="#" id="close4">Close</a> </p>
</div>
</div>
</body>
</html>
答案 0 :(得分：5)
我重写了你的HTML和jQuery代码。
Problems with show hide jquery
你不再重复使用ID是好的，但当你像你一样重复一致时，你不需要ID来分配事件处理程序。
修改
没有冒犯，但听起来你只需要拿一本关于jQuery的书并阅读几章。当你有一点指导时，你会惊讶于jQuery是多么容易理解。
我不知道任何jQuery，但在阅读了一些学习jQuery 后，我对基本概念有了很好的把握。我花了几个小时的时间。
修改
你可以在这里看到重复。
<a href="#" class="click">Green 1929</a>
<div class="box" align="center">
<div class="showhideconent">
<p><a href="coke/green1929.shtml"><img src="green1929.jpg" width="200" height="200" alt="Green 1929" /></a></p>
<p><a href="#" class="close">Close</a> </p>
</div>
</div>
<a href="#" class="click">1970s Cans</a>
<div class="box" align="center">
<div class="showhideconent">
<p><a href="coke/tincans.shtml"><img src="coke_tincan.jpg" width="200" height="200" alt="Tin Cans" /></a></p>
<p><a href="#" class="close">Close</a> </p>
</div>
</div>
首先，我更改了a元素，使其class="click"代替id="click"。
他们显然打算扮演类似的角色，但在不同的内容上。假设有20个这样的部分带有click类。我可以使用：
$('.click').click(function() {
// Do something.
});
但是，当然，我们希望每个人只对与之相关的内容采取行动。此外，我们需要确保我们正在使用被单击的正确的一个。为此，我们使用this关键字。它指的是接收事件的元素。
$('.click').click(function() {
$(this) // Places the element that was clicked in a jQuery object.
// Do something.
});
那么现在我们做什么？好吧，看起来你想用它来显示内容。所以我们需要找到该链接的相关内容，然后显示它。
$('.click').click(function() {
$(this).next().find('.showhidecontent').show();
return false; // This return statement can be used to disable the default behavior of the link. Sometimes necessary
});
这段代码几乎解释了自己。 $(this)（我们点击的元素）抓取next()元素（具有类.box的元素）然后在其中搜索具有类.showhidecontent的元素，然后显示它。
您可以使用.close按钮执行类似操作。它更容易，因为它位于.showhidecontent元素内。
$('.close').click(function() {
$(this).closest('.showhidecontent').hide();
return false; // This return statement can be used to disable the default behavior of the link. Sometimes necessary
});
这将函数分配给具有.close类的所有元素。点击后，点击的内容会搜索closest()父级，其中包含类.showhidecontent，然后将其隐藏。
修改
要将所有内容放在一起，只要您修复了类，此代码就会将正确的事件分配给所有重复的部分。 （你几乎可以放弃ID）
$(document).ready(function() {
$('.showhidecontent').hide(); // Hide all the showhidecontent class elements
// Assign click event handler to all .click class elements
$('.click').click(function() {
$(this).next().find('.showhidecontent').show();
return false; // This return statement can be used to disable the default behavior of the link. Sometimes necessary
});
// Assign click event handler to all .close class elements
$('.close').click(function() {
$(this).closest('.showhidecontent').hide();
return false; // This return statement can be used to disable the default behavior of the link. Sometimes necessary
});
});
希望这会有所帮助。 jQuery的设计非常易读，但你需要先学习基础知识（就像你做的任何事情一样）。
答案 1 :(得分：0)
问题在于$("a")返回所有＆lt; a＆gt;页面上的元素。因此，您有效地将“show”功能绑定到每个链接。当事件触发时，jQuery会依次触发每个处理程序并显示所有内容。
你所拥有的实际上是非常低效的（在代码重复方面），你可以用更少的代码来完成它。假设这是你的HTML：
<a href="#" class="click">Amber Bottle 1914</a>
<div class="showhideconent">
<p><a href="coke/Amber1914.shtml"><img src="amber1914.jpg" width="200" height="200" alt="Amber Coke" /></a></p>
<p><a href="#" id="close">Close</a> </p>
</div>
<a href="#" class="click">Amber Bottle 1915</a>
<div class="showhideconent">
<p><a href="coke/Amber1915.shtml"><img src="coke/Amber1914.shtml" width="200" height="200" alt="Amber Bottle 1915" /></a></p>
<p><a href="#" id="close2">Close</a> </p>
</div>
<a href="#" class="click">Green 1929</a>
<div class="showhideconent">
<p><a href="coke/green1929.shtml"><img src="green1929.jpg" width="200" height="200" alt="Green 1929" /></a></p>
<p><a href="#" id="close3">Close</a> </p>
</div>
<a href="#" class="click">1970s Cans</a>
<div class="showhideconent">
<p><a href="coke/tincans.shtml"><img src="coke_tincan.jpg" width="200" height="200" alt="Tin Cans" /></a></p>
<p><a href="#" id="close4">Close</a> </p>
</div>
请注意，您不能拥有多个具有相同ID的元素，因此我已将您的几个ID更改为类。我已经简化了一点，所以你可能不得不添加一些东西，如果它需要造型。现在您可以使用以下javascript：
$(function() {
$("a.click").click(function() {
// this will be called whenever a <a class="click"> link is clicked
// 'this' will refer to the actual <a> tag itself so we can use that to
// find the next <div class="showhidecontent"> to show/hide
$(this).next(".showhidecontent").toggle("slow");
});
});
此代码将为每个＆lt; a class =“click”＆gt;注册一个“click”处理程序。标记，单击时将切换文档中的 next “showhidecontent”元素。
答案 2 :(得分：0)
首先，ID是唯一的，你不能有两个相同的ID（嗯，你可以，但你不应该）。其次，你不需要几个$(document).ready(function(){ });，一个就够了。最后，解决您的问题后，$('a').click(function(){ });会将click()事件绑定到您拥有的每个a标记。
尝试类似：
<a href="#" id="click-3">Green 1929</a>
<div id="box" align="center">
<div id="showhideconent3">
<p><a href="coke/green1929.shtml"><img src="green1929.jpg" width="200" height="200" alt="Green 1929" /></a></p>
<p><a href="#" id="close3">Close</a> </p>
</div>
</div>
<a href="#" id="click-4">1970s Cans</a>
<div id="box" align="center">
<div id="showhideconent4">
<p><a href="coke/tincans.shtml"><img src="coke_tincan.jpg" width="200" height="200" alt="Tin Cans" /></a></p>
<p><a href="#" id="close4">Close</a> </p>
</div>
</div>
和
$(document).ready(function(){
$('#showhideconent-3, #showhideconent-4').hide();
$('#click-3').click(function(){
$('#showhideconent-3').show('slow');
}
$('#click-4').click(function(){
$('#showhideconent-4').show('slow');
}
});