显示隐藏jQuery的问题 [英] Problems with show hide jquery
本文介绍了显示隐藏jQuery的问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使躲藏物在多个物体上起作用，但是我无法使其起作用.任何帮助都将是一件非常感激的事情……我不知道该怎么做.如果我只做一个秀皮，它的效果很好，但不止一个，它不能正常工作.
I am trying to get show hide to work on multiple objects but I am unable to get it to work. Any help would be nice an much appreciated... I am lost on how to do this. If I only do one show hide it works fine but more than one it does not work properly.
<!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>
推荐答案
您正在使用重复的ID作为封闭锚.改用类.close，然后将选择器修改为:
You are using duplicate IDs for your close anchors. Use the class .close instead and modify your selector to look like:
$('a.close').click(function(){
$('#content1').hide('slow');
});
<a href="#" class="close">Close</a>
...而且永远不要使用重复的ID.
...and don't use duplicate IDs, ever ever.
这篇关于显示隐藏jQuery的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
