显示隐藏jquery的问题_Jquery - Fatal编程技术网

显示隐藏jquery的问题

jquery

显示隐藏jquery的问题,jquery,Jquery,我试图让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.

我试图让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>


显示隐藏样本
$（文档）.ready（函数（）{
$（'#content1'）.hide（）；
$（'a'）。单击（函数（）{
$（'content1'）。show（'slow'）；
});
$（'a#close'）。单击（函数（）{
$（'content1'）。隐藏（'slow'）；
})
});
正文{字体大小：12px；字体系列：“投石机MS”；背景：#CCF}
#内容1{
边框：1px实心#DDDDDD；
填充：10px；
边缘顶部：5px；
宽度：300px；
}
隐藏1
 Lorem ipsum dolor sit amet，是一位杰出的领导者。pulvinar，enim ac hendrerit mattis，lorem mauris tellus，nec porttitor diam Nun c Temporal dui。埃尼安奥奇。这是一种暂时的直径扭曲。梅塞纳斯·奎斯·勒姆。纳拉姆·森佩尔。这是一个很好的例子。克拉乌纳。维瓦摩斯·马萨·梅特斯、坦普斯·梅特斯、酵素·梅斯特、阿利奎特·阿库姆桑、莱克特斯。这是一个很好的例子。毛里斯·普尔维纳尔

隐藏2
Lorem ipsum dolor sit amet，是一位杰出的领导者。pulvinar，enim ac hendrerit mattis，lorem mauris tellus，nec porttitor diam Nun c Temporal dui。埃尼安奥奇。这是一种暂时的直径扭曲。梅塞纳斯·奎斯·勒姆。纳拉姆·森佩尔。这是一个很好的例子。克拉乌纳。维瓦摩斯·马萨·梅特斯、坦普斯·梅特斯、酵素·梅斯特、阿利奎特·阿库姆桑、莱克特斯。这是一个很好的例子。毛里斯·普尔维纳尔

您正在使用重复的ID作为近距离定位。改为使用类

。关闭，并将选择器修改为：
 $('a.close').click(function(){
     $('#content1').hide('slow');
 });

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

$（'a.close'）。单击（函数（）{
$（'content1'）。隐藏（'slow'）；
});

…并且永远不要使用重复的ID。
此块：
$('a').click(function(){   
  $('#content1').show('slow');   
}); 

表示无论何时单击任何锚定，都会显示ID为content1的元素。然后定义一个ID为“close”的锚点，定义一个处理程序来关闭元素。这会导致冲突，因为它也是一个锚。既然close元素是一个ID为“close”的锚点，您希望它做什么？调用show（）是因为它是一个锚点，调用hide（）是因为它的ID为“close”？
如果需要其他答案的组合，再加上一点，请更改标记以使用类，而不是重复的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>

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

这些单击处理程序不再指向单个ID或类，而是相对于当前链接对类进行操作。。单击
锚点打开以下。content
div using and，而.close
链接隐藏了它正在使用的。content
div，都是相对的。
感谢您的解释。。。老实说，我没有想到这一点。