[Jquery - 실습] text ellipsis

테크야끼·2021년 4월 28일

hasClass parent prev()removeClass text ellipsis

jQuery

목록 보기

2/11

💡학습목표

일정 글자수가 넘으면 말줄임 버튼(text ellipsis)이 생기는 텍스트 박스를 구현하는 것을 통해 class를 제어하는 .hasClass(), .removeClass() 메서드와 주변의 태그를 제어하는 .parent(),.prev(). 메서드 등, Jqeury에서 자주 사용되어지는 메서드를 이해한다.

💡주요 로직

.html(),와 .length()를 이용해 일정 글자수(100자)가 넘었는지 체크한다.
100자가 넘어가면 .removeClass()와 .addClass()를 이용해 말줄임표와 버튼을 제어한다.
.toggle()을 이용해 요소를 보여주거나 숨기거나 한다.

💡코드

HTML

 <body>
   <span class="more_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
     cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
 </body>

.more_text class를 가진 에 텍스트를 입력한다. 여기서 100자가 넘어가면 말줄임 버튼을 표시할 것이기 때문에 100자가 넘는 로렘텍스트를 임의로 입력했다.

Jquery로 추가할 DOM 요소

     <span>...</span> <!-- 말줄임표 -->
     <span class="more_content"> <!-- 버튼을 클릭했을때 나타나는 텍스트-->
       <span>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
         cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
     </span>
     <a href="#" class="more_btn less">Show More</a><!-- 버튼-->
   </span>

Jquery로 추가할 DOM 요소를 확인하기 위해서 정리해보았다.

100자 이상인 경우 먼저 말줄임표(...)가 나타나고 버튼을 클릭했을 때 뒤의 텍스트가 나오게 하기 위해 잘린 텍스트는 에 따로 담아주었다.
물론 Jquery 구현할 것이기 때문에 html에 마크업은 하지않는다.

CSS

/* 말줄임표 */
.more_content>span {
  display: none
}

.more_content a {
  display: block;
  margin-top: 10px;
}

/* 버튼 안쪽 text */
.more_content a span {
  display: inline-block;
  line-height: 20px;
  height: 20px;
  border: 2px solid pink;
  border-radius: 10px;
  padding: 0 10px;
  color: pink;
}

Jquery로 제어하기 전 디폴트 상태는 초과 텍스트가 보이지 않는 상태이기 때문에 .more_content>span는 display:none 으로 숨겨주고, 텍스트박스와 버튼을 취향껏 스타일링 해준다.

Jquery


// 1. 변수선언

const showText = 100; //글자수 제한
let elem = $(".more_text"); //전체 텍스트
let moreBtnText = "show more"; //버튼 텍스트
let lessBtnText = "show less"; //버튼 텍스트

let content = elem.html(); //전체 텍스트 가져오기
let contentLeng = content.length; //전체 텍스트 글자수

let lessText = content.substr(0, showText) //0자 ~ 100자 자르기 (보여지는 텍스트)
let moreText = content.substr(showText, contentLeng); //100자 ~ 끝 자르기 (초과 텍스트)

// 2. if구문으로 조건 생성 후 출력

let changeHtml = '';
if (showText < contentLeng) {
  changeHtml = lessText + "<span>...</span><span class='more_content'><span>"+moreText+"</span><a href='#'class='more_btn less'><span>show more</span></a></span>";
}
elem.html(changeHtml)
});

// 3. click시 실행문

  $(".more_btn").click(function() {
    if ($(this).hasClass("less")) {
      $(this).removeClass("less");
      $(this).html("<span>"+lessBtnText+"</span>")
    } else {
      $(this).addClass("less");
      $(this).html("<span>"+moreBtnText+"</span>")
    }   
    
// 4. toggle()로 말줄임표와 텍스트 제어    
 $(this).prev().toggle(); //초과텍스트
 $(this).parent().prev().toggle(); //말줄임표
      });
});

2. if구문을 말로 풀어쓰면 이렇다.

전체 텍스트 글자수(contentLeng)이 100(showText)자 보다 적다면, 전체텍스트를
보여지는 텍스트(lessText) + ... + 초과텍스트(moreText) + show more 버튼으로 대체한다. changeHtml가 복잡해보이지만 위에서 미리 작성해둔 코드를 쓰면 어렵지않다.

3. click시 실행되는 if구문을 말로 풀어쓰면 이렇다.

버튼이 less 클래스를 가지고 있으면 less를 지우고 버튼 텍스트를 "show less" 로 바꾼다.
(즉 초과 텍스트가 모두 보여지는 경우)
버튼이 less 클래스를 가지고 있지 않으면 less를 추가하고 버튼 텍스트를 "show more" 로 바꾼다.
(즉 초과 텍스트가 숨겨진 경우)