HTML：jQuery：DOM操作
[英]HTML: jQuery: DOM manipulation
问题描述
我很懒。 那里！ 那是不对的。
我有一个长度不确定的项目列表，我想用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>
当我单击“显示更多”链接时，它将显示类“显示更多”的所有三个范围。 如何调整“ show_more_toggle”点击处理程序，使其仅打开同一列表项中的跨度？
约束：由于其他原因，我不能在范围或列表元素上使用“ id”属性。
4 个解决方案
解决方案1
3 2011-10-12 13:47:52
$('a.showmore_link').click(function() {
$(this).next().show();
});
解决方案2
1 2011-10-12 13:47:46
尝试-
show_more_toggle=function(){
$(this).siblings(".showmore").slideToggle();
}
解决方案3
1 已采纳 2011-10-12 13:51:43
另一个解决方案：
$(document).ready(function() {
$(".showmore_link").click(function() {
$(this).parent().children(".showmore").slideToggle();
});
});
解决方案4
0 2011-10-12 13:49:18
使用next() -它将使您获得span元素。
React和jQuery DOM操作
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.