jquery로 텍스트 제한

목록보기에서 내 설명 텍스트를 클릭 할 때 나머지 텍스트를 전환 할 수있는 문자 개수의 문자로 제한하려고합니다. 다음 코드와 함께 작동하는 문제는 텍스트를 http://jsfiddle.net/lgtsfiddler/G42dR/5/jquery로 텍스트 제한

$("p").each(function(i) { 
    len = $(this).text().length; 
    if (len > 150) { 
     $(this).text($(this).html().substr(0, 150)); 
    } 
});

이 어떻게에 드롭 다운 이벤트를 추가 할 수 스 니펫을하지 않는 제한?

출처

2012-11-19 fefe

클릭 에 더 많은 것을 읽어야합니다. 나머지 텍스트를 전환해야합니다. – fefe

왜 세상에서 $ (this) .text ($ (this) .html())를 사용하게 되었습니까? 당신은 당신의 묘사에서 멋진 마크 업을 많이 얻을 것입니다! 또한 $ (this)를 입력 할 때마다 쓸데없는 병목 현상이 발생하기 때문에 반드시 일부 변수를 저장해야합니다. 질문에 대답하려면 설명을 다듬을 때 원래 설명을 .data()를 사용하여 요소에 저장 한 다음 이벤트 중에 검색하여 전체 설명을 표시하십시오. – redline

"미리보기"부분과 텍스트의 나머지 부분을 분리 된 줄로 묶는 한 가지 방법이 있습니다. 그런 다음 텍스트의 나머지 부분을 포함하는 범위 숨기거나 표시 여부를 전환 링크를 추가 할 수 있습니다

$(this).html("<span>" + $(this).text().substr(0,150) + "</span><span style='display:none'>" + $(this).text().substr(150) + "</span>"); 

var link = $("<a href='#' class='more'>More..</a>"); 
$(this).append(link); 
$(link).click(function(){ 
    $(this).prev().toggle(); 
    $(this).html($(this).html()=="More.."?"Less":"More.."); 
});

데모 : http://jsfiddle.net/G42dR/9/

출처

2012-11-19 08:31:48

도움을 주셔서 감사합니다. – fefe

합니까이 도움이 당신에게 :

  $('p').each(function(){ 
       if($(this).text().length > 150){ 
        $(this).attr('data-text', $(this).text()); 
        $(this).text($(this).text().substring(0, 150)); 
        $(this).after($('<a onclick="$(this).prev().text($(this).prev().attr(\'data-text\')); $(this).remove();"> Read more...</a>')); 
       } 
      });

출처

2012-11-19 08:37:52

jquery로 텍스트 제한

답변

관련 문제