Question

另一个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>

Answer 1

迈克尔，当你问起这个问题时，请看我早些时候的回答。

我重写了你的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的设计非常易读，但你需要先学习基础知识（就像你做的任何事情一样）。

Answer 2

问题在于$("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”元素。

Answer 3

首先，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');
    }
});

jQuery代码的问题

3 个答案: