HTML: jQuery: DOM 操作答案

【问题标题】：HTML: jQuery: DOM manipulationHTML: jQuery: DOM 操作
【发布时间】：2011-10-12 13:43:33
【问题描述】：

我很懒。那里！那不碍事了。

我有一个不确定长度的项目列表，我想在 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”属性。

【问题讨论】：

标签： javascript jquery html dom

【解决方案1】：

$('a.showmore_link').click(function() {
    $(this).next().show();
});

【讨论】：

或 $(this).hide().next().show(); 如果您想同时摆脱现在无用的链接。

【解决方案2】：

另一种解决方案：

$(document).ready(function() {
    $(".showmore_link").click(function() {
        $(this).parent().children(".showmore").slideToggle();
    });
});

http://jsfiddle.net/A7fM5/

【讨论】：

这个解决方案对我来说效果最好，因为在非人为的情况下，它更普遍，“showmore”跨度与“showmore_link”共享父级，但并不总是兄弟级。谢谢。

【解决方案3】：

试试 -

 show_more_toggle=function(){
    $(this).siblings(".showmore").slideToggle();
 }

演示 - http://jsfiddle.net/ipr101/9GB9u/

【讨论】：

【解决方案4】：

使用next() - 它会让你获得 span 元素。

【讨论】：