HTML : jQuery : DOM 조작

나는 게으르다. 그곳에! 그건 막 다른 길이야.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"클릭 핸들러를 조정하여 동일한 목록 항목의 스팬을 열 수있는 방법은 무엇입니까?

CONSTRAINT : 다른 이유 때문에 범위 또는 목록 요소에 "id"속성을 사용할 수 없습니다.

출처

2011-10-12 Jay Godse

다른 해결책 :..

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

http://jsfiddle.net/A7fM5/

출처

2011-10-12 13:51:43 alexl

"showmore_link"와 "showmore"span은 부모를 공유하지만 항상 형제가 아니기 때문에 비 (非) 인위적인 경우에 더 일반적입니다. 고맙습니다. –

시도 -

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

데모 - http://jsfiddle.net/ipr101/9GB9u/

출처

2011-10-12 13:47:46 ipr101

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

출처

2011-10-12 13:47:52 Blazemonger

또는'$ (이) .hide() 다음() 쇼(); '당신은 지금 쓸모없는 링크를 제거하려면 동시에. – Blazemonger

사용 next() - 당신이 요소에 걸쳐 얻을 것이다.

출처

2011-10-12 13:49:18 Bizniztime

HTML : jQuery : DOM 조작

답변

관련 문제