Question

我正在尝试让show hide在多个对象上工作，但我无法让它工作。任何帮助将是一个很好的非常赞赏...我迷失了如何做到这一点。如果我只做一个秀隐藏它工作正常但不止一个它不能正常工作。

    <!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>Show Hide Sample</title>
<script src="js/jquery.js" type="text/javascript"></script>

<script type="text/javascript">
  $(document).ready(function(){
  $('#content1').hide();
  $('a').click(function(){
 $('#content1').show('slow');

});

 $('a#close').click(function(){
        $('#content1').hide('slow');
})

});
</script>

    <style>
body{font-size:12px; font-family:"Trebuchet MS"; background: #CCF}
#content1{
border:1px solid #DDDDDD;
padding:10px;
margin-top:5px;
width:300px;
}
</style>

</head>

<body>

<a href="#" id="click">Test 1</a>
<div class="box">
<div id="content1">
<h1 align="center">Hide 1</h1>

<P> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pulvinar, enim ac hendrerit mattis, lorem mauris vestibulum tellus, nec porttitor diam nunc tempor dui. Aenean orci. Sed tempor diam eget tortor. Maecenas quis lorem. Nullam semper. Fusce adipiscing tellus non enim volutpat malesuada. Cras urna. Vivamus massa metus, tempus et, fermentum et, aliquet accumsan, lectus. Maecenas iaculis elit eget ipsum cursus lacinia. Mauris pulvinar.</p>




<p><a href="#" id="close">Close</a></p>
</div>
</div>


<a href="#" id="click">Test 2</a>
<div class="box">
<div id="content1">
<h1 align="center">Hide 2</h1>
   <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pulvinar, enim ac hendrerit mattis, lorem mauris vestibulum tellus, nec porttitor diam nunc tempor dui. Aenean orci. Sed tempor diam eget tortor. Maecenas quis lorem. Nullam semper. Fusce adipiscing tellus non enim volutpat malesuada. Cras urna. Vivamus massa metus, tempus et, fermentum et, aliquet accumsan, lectus. Maecenas iaculis elit eget ipsum cursus lacinia. Mauris pulvinar.</p>

<p><a href="#" id="close">Close</a></p>
</div>
</div>


</body>
</html>

Answer 1

您正在为关闭锚点使用重复的ID。请改为使用班级.close，并将您的选择器修改为：

 $('a.close').click(function(){
     $('#content1').hide('slow');
 });

 <a href="#" class="close">Close</a>

...并且不要使用重复的ID。

Answer 2

这个区块：

$('a').click(function(){   
  $('#content1').show('slow');   
});

表示任何时候点击任何锚点，都会显示ID为content1的元素。然后，您可以定义ID为“close”的锚点，您可以定义一个用于关闭该元素的处理程序。这会导致冲突，因为它也是一个锚点。由于close元素是ID为“close”的锚点，您希望它做什么？调用show（），因为它是一个锚或调用hide（），因为它的ID为“close”？

Answer 3

您需要结合使用其他答案以及更多内容，更改标记以使用类而不是重复ID，如下所示：

<a href="#" class="click">Test 2</a>
<div class="box">
<div class="content">
<h1 align="center">Hide 1</h1>

<P> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pulvinar, enim ac hendrerit mattis, lorem mauris vestibulum tellus, nec porttitor diam nunc tempor dui. Aenean orci. Sed tempor diam eget tortor. Maecenas quis lorem. Nullam semper. Fusce adipiscing tellus non enim volutpat malesuada. Cras urna. Vivamus massa metus, tempus et, fermentum et, aliquet accumsan, lectus. Maecenas iaculis elit eget ipsum cursus lacinia. Mauris pulvinar.</p>

<p><a href="#" class="close">Close</a></p>
</div>
</div>

调整点击处理程序以对类进行操作并 relative ，如下所示：

$('a.click').click(function(){
  $(this).next('.box').children('.content').show('slow');
});
$('a.close').click(function(){
  $(this).closest('.content').hide('slow');
});

这些点击处理程序不再指向单个ID或类，而是相对于当前链接对类进行操作。 .click锚点使用.next()和.children()打开以下.content div，.close链接隐藏.content div使用{{1}} div 3}}，所有亲戚。

show hide jquery的问题

3 个答案: