HTML：jQuery：DOM 操作
我很懒。那里！那是不碍事的。
我有一个长度不确定的项目列表，我想用 HTML 呈现它们。我想显示每个项目的一部分，然后在每个项目中都有一个“显示更多”链接，该链接将显示该项目的更多内容。由于“显示更多”链接实现相同的功能，因此我将相同的单击处理程序函数绑定到“显示更多链接”，然后显示包含隐藏文本的 HTML 范围。我的代码如下所示：
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
</head>
<body>
<p>List of stuff</p>
<ul>
<li> One <a href="#" class="showmore_link">show more</a> <span class="showmore" style="display:none"> More about One </span></li>
<li> Tow <a href="#" class="showmore_link">show more</a> <span class="showmore" style="display:none"> More about Two </span></li>
<li> Three <a href="#" class="showmore_link">show more</a> <span class="showmore" style="display:none"> More about Three </span></li>
</ul>
<script type="text/javascript">
$(document).ready(function() {
$(".showmore_link").click(show_more_toggle);
});
show_more_toggle=function(){
$(".showmore").slideToggle();
}
</script>
</body>
</html>
当我单击“显示更多”链接时，它显示类“showmore”的所有三个跨度。如何调整“show_more_toggle”点击处理程序，以便它只打开同一列表项中的范围？
约束：由于其他原因，我无法在跨度或列表元素上使用“id”属性。
I'm lazy. There! That's out of the way.
I have a list of items of indeterminate length which I would like to render in HTML. I want to show a part of each item and then have a "show more" link in each item which will show more of the item. Since the "show more" link implements the same functionality, I bound the same click handler function to the "show more link" which then shows the HTML span which contains the hidden text. My code looks like this:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
</head>
<body>
<p>List of stuff</p>
<ul>
<li> One <a href="#" class="showmore_link">show more</a> <span class="showmore" style="display:none"> More about One </span></li>
<li> Tow <a href="#" class="showmore_link">show more</a> <span class="showmore" style="display:none"> More about Two </span></li>
<li> Three <a href="#" class="showmore_link">show more</a> <span class="showmore" style="display:none"> More about Three </span></li>
</ul>
<script type="text/javascript">
$(document).ready(function() {
$(".showmore_link").click(show_more_toggle);
});
show_more_toggle=function(){
$(".showmore").slideToggle();
}
</script>
</body>
</html>
When I click the "show more" link, it shows all three spans of class "showmore". How can I adjust the "show_more_toggle" click handler so that it only opens up the span in the same list item?
CONSTRAINT: I cannot use "id" attributes on the spans or the list elements for other reasons.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
另一个解决方案：
http://jsfiddle.net/A7fM5/
another solution:
http://jsfiddle.net/A7fM5/
尝试 -
演示 - http://jsfiddle.net/ipr101/9GB9u/
Try -
Demo - http://jsfiddle.net/ipr101/9GB9u/
使用
next()- 它将获得 span 元素。Use
next()- it will get you span element.