Javascript HTML:jQuery:DOM操作_Javascript_Jquery_Html_Dom

Javascript HTML:jQuery:DOM操作

javascript jquery html dom

Javascript HTML:jQuery:DOM操作,javascript,jquery,html,dom,Javascript,Jquery,Html,Dom,我很懒。那里那太离谱了我有一个不确定长度的项目列表，我想在HTML中呈现。我想显示每个项目的一部分，然后在每个项目中有一个“显示更多”链接，它将显示更多的项目。由于“showmore”链接实现了相同的功能，因此我将相同的click handler函数绑定到“showmore链接”，该链接随后显示包含隐藏文本的HTML范围。我的代码如下所示： <html> <head> <script type="text/javascript" src="http://c

我很懒。那里那太离谱了

我有一个不确定长度的项目列表，我想在HTML中呈现。我想显示每个项目的一部分，然后在每个项目中有一个“显示更多”链接，它将显示更多的项目。由于“showmore”链接实现了相同的功能，因此我将相同的click handler函数绑定到“showmore链接”，该链接随后显示包含隐藏文本的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>


物品清单

再来一个关于一个
再拖两个大约两个
还有三个大约三个

$（文档）.ready（函数（）{
$（“.showmore\u链接”）。单击（显示更多切换）；
});
显示更多切换=函数（）{
$（“.showmore”）.slideToggle（）；
}

当我单击“showmore”链接时，它会显示“showmore”类的所有三个跨度。如何调整“show\u more\u toggle”单击处理程序，使其仅打开同一列表项中的范围

约束：由于其他原因，我不能在跨度或列表元素上使用“id”属性

试试-

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

演示-

尝试-

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

演示-

使用-它将获得span元素。

另一个解决方案：

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

另一种解决方案：

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

或

$（this.hide（）.next（）.show（）如果您想同时删除现在无用的链接。或者$（this）.hide（）.next（）.show（）如果你想同时摆脱现在无用的链接，这个解决方案最适合我，因为在非人为的情况下，它更一般，“showmore”跨度与“showmore_链接”共享一个父链接，但并不总是兄弟链接。谢谢。这个解决方案最适合我，因为在非人为的情况下，它更一般，“showmore”跨度与“showmore_链接”共享一个父节点，但并不总是兄弟节点。非常感谢。