💡학습목표
이전에 구현했던 말줄임 버튼(text ellipsis) 텍스트박스에 .each() 메서드를 이용해 복수의 텍스트 박스를 제어 기능을 추가하고 .each()의 문법과 기능을 이해한다.
관련 포스팅은 이 곳!
text ellipsis
💡주요 로직
.each()를 이용하여 특정 엘리먼트의 index 값을 받아와 기능을 반복한다.
HTML
<body>
<h1>text ellipsis</h1>
<div class="flex_wrap">
<div class="box">
<div class="inner">
<span class="more_text"
>111Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna or ut labore et
dolore magna orut labore et dolore magna or</span
>
</div>
</div>
<div class="box">
<div class="inner">
<span class="more_text"
>222Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna or ut labore et
dolore magna orut labore et dolore magna or</span
>
</div>
</div>
<div class="box">
<div class="inner">
<span class="more_text"
>333Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna or ut labore et
dolore magna orut labore et dolore magna or</span
>
</div>
</div>
</div>
</body>-
한 페이지에 텍스트 박스를 3개를 넣고
<span class="more_text">태그에 텍스트를 입력했다. CSS를 위해 감싼.inner,.box를 빼면 html 구조는 텍스트박스 한 개를 구현할 때와 같다. -
각각의 박스를 비교하기 위해 임의로 111 222 333 이라는 숫자를 넣었다.
CSS
html,
body {
height: 100%;
}
body {
background-color: #d9d9d9;
}
body,
a {
color: #666;
}
ul,
ol {
list-style: none;
}
span {
word-break: break-all;
}
h1 {
font-size: 50px;
line-height: 50px;
margin: 50px auto;
text-align: center;
}
.flex_wrap {
display: flex;
justify-content: space-around;
}
.box {
flex-basis: 300px; /*화면 늘어났을 때 300px만큼 너비차지*/
flex-grow: 0;
}
.box .inner {
border: 1px solid #f1f1f1;
background-color: #fff;
padding: 20px;
box-sizing: border-box;
}
.more_content > span {
display: none;
}
.more_content a {
display: block;
margin-top: 10px;
}
.more_content a span {
display: inline-block;
height: 20px;
line-height: 20px;
border: 2px solid pink;
border-radius: 10px;
padding: 0 10px;
color: pink;
}
-
전체적인 css 레이아웃을 잡기위해
.flex_wrap에flex를 주어 수평정렬을 하고,space-around로 간격을 일정하게 주었다. -
각각의 .box에는
flex-basis: 300px;를 주어 화면이 늘어났을 때 300px만큼 너비를 차지하게 한다.
flex-basis
- Flex Item의 (공간 배분 전) 기본 너비 설정
- Flex Items의 속성으로 적용한다
💡Jquery 복수의 엘리먼트를 제어
본 포스팅의 기본적인 코드는 이 전에 구현한 text-ellipsis와 거의 동일하다. 하지만 같은 기능이 구현되있는 하나의 텍스트 박스가 아니라 여러개라면 이전 포스팅과 같은 코드를 써도 원하는 결과를 얻지못한다.
예를들어 전에 사용한 script코드를 적용하면 숫자로 구분해놓은 컨텐츠가 모두 111로 출력된 결과를 볼 수 있는데, 이것은 elem = $('.more_text');가 복수의 .more_text 를 object로 받아와 index값이 0인 첫번째 .more_text를 반환하기 때문이다.
이것을 해결하기 위해 .each() 메서드를 이용한다.
$(function () {
const showText = 100;
let elem = $(".more_text");
let moreBtnText = "Show More";
let lessBtnText = "Show Less";
// 1. .each() 메서드로 각각의 요소를 받아와 반복시킴
elem.each(function (i) {
//실행문
let content = $(this).html();
let contentLeng = content.length;
let lessText = content.substr(0, showText);
let moreText = content.substr(showText, contentLeng);
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>";
$(this).html(changeHtml);
}
});
$(".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>");
}
$(this).prev().toggle();
$(this).parent().prev().toggle();
});
});
.each()
- 매개 변수를 받아와 배열이나 객체의 요소를 검사할 수 있는 메서드이다.
- for in 반복문과 같이 배열이나 객체의 요소를 검사할 수 있다.
- syntax
$(selector).each(function(index, item){}
- 첫 번째 인자에는 자바스크립트 배열이나 객체가 온다.
- 두 번째 인자에는 각 요소를 반복하면서 처리할 콜백 함수가 온다.
위의 코드에서는 ".more_text"를 각각 받아와 { }안의 콜백함수를 반복해서 실행시킨다. content는 각각의 컨텐츠의 html을 가져와야 하기 때문에 this를 사용한다.
이 코드를 for 구문으로 바꿔쓴다면 아래의 코드와 같다.
elem = document.body.getElementsByClassName('more_text');
for( var i = 0; i < elem.length; i++){
var content = elem[i];
}결과
클릭전
클릭후
👩💻후기
- 같은 로직을 가졌더라도 경우에 따라 적합하게 수정할 수 있는 능력을 가져야 한다고 느꼈다
.each()처럼 짧고 간략하지만 강력한 효과를 내는 Jqeury 메서드에 대해 더 공부하고싶다.
