仅折叠/展开我选择的 div 而不是全部?
大家好,
我是一个刚刚开始使用 jQuery 的新手。我正在为我们的团队构建一个基本的 PHP 应用程序,该应用程序显示开放的帮助台票证列表。
为了避免屏幕混乱,我只想显示票证的标题及其描述(如果单击)。
这是我的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Animate my Div</title>
<style type="text/css" media="screen">
a { text-decoration: none; }
#expand { background-color: #fff; }
#mydiv { display: none; }
</style>
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript"> $(document).ready(function(){
$("a").click(function(){ $("div").slideToggle(1000); });
}); </script>
</head>
<body>
<?php
$con = mysql_connect("korg", "joe", "bob");
if (!$con) { die('Could not connect: ' . mysql_error()); }
mysql_select_db("wfr11", $con);
$result = mysql_query(" select title, description from webcases");
while ($row = mysql_fetch_array($result)) {
?>
<p><a href="#expand"><?php echo $row['title']; ?></a></p>
<div id="mydiv"><?php echo $row['description']; ?></div>
<?php
} mysql_close($con); ?>
</body>
</html>
现在,我的代码可以工作,但会展开所有打开的票证的所有 div,无论我单击什么票证名称。
理想情况下,我想显示我单击的票证名称的描述。不是全部。是否可以?
感谢您的帮助。
Greetings,
I am a newbie who just started with jQuery. I am building a basic PHP app for our team that displays a list of open helpdesk tickets.
To avoid cluttering the screen, I only want to display the title of the ticket and if clicked, its description.
Here's my code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Animate my Div</title>
<style type="text/css" media="screen">
a { text-decoration: none; }
#expand { background-color: #fff; }
#mydiv { display: none; }
</style>
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript"> $(document).ready(function(){
$("a").click(function(){ $("div").slideToggle(1000); });
}); </script>
</head>
<body>
<?php
$con = mysql_connect("korg", "joe", "bob");
if (!$con) { die('Could not connect: ' . mysql_error()); }
mysql_select_db("wfr11", $con);
$result = mysql_query(" select title, description from webcases");
while ($row = mysql_fetch_array($result)) {
?>
<p><a href="#expand"><?php echo $row['title']; ?></a></p>
<div id="mydiv"><?php echo $row['description']; ?></div>
<?php
} mysql_close($con); ?>
</body>
</html>
Right now, my code works but unfolds all the divs for all open tickets, regardless of what ticket name I clicked.
Ideally, I'd like to show the description of for the ticket name I clicked. Not all of them. Is it possible?
Thanks for your help.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
完全有可能,是的。
您遇到的第一个问题是您在循环中重复 ID,HTML ID 必须是唯一的。我建议在那里上课。将两个组件包装在一个 DIV 中,使它们成为一个也可以单独处理的组合项。
然后,您需要使 jQuery 仅选择相邻的描述 DIV。
如果数据库中的回显尚未采用正确的 HTML 格式,请记住对它们使用
htmlentities()
。Entirely possible, yes.
First issue you have is that you are repeating an ID in the loop, HTML IDs must be unique. I would suggest using a class there. Wrap the two components together in a DIV to make them in to a combined item that can be dealt with individually as well
Then, you need to make your jQuery select just the adjacent description DIV.
Remember to use
htmlentities()
on your echo's from the database if they are not already in proper HTML form.是的,你正在寻找切换。也许使用 id 来选择您想要的 div 而不仅仅是普通的 div。
通过为链接分配一个类来定位特定的 div。
Yep, you're after a toggle. Maybe use an id to select the divs you want rather than just the plain div.
Target particular divs by assigning a class to the link.