[javascript] forEach연습

html 소스를 쏘씜플~하게 쓰고 싶었음.

​

어제는 for문으로 만들었었는데, for 안에 for를 또 넣는게 좀.. 그래서...

forEach로 수정해버리기

//html
<div class="wrap">
    <div class="btns">
        <button type="button" class="btn">button1</button>
        <button type="button" class="btn">button2</button>
    </div>
    <div class="conts">
        <ul></ul>
    </div>
</div>

//css
* {box-sizing:0;}
ol, ul {list-style:none; margin:0; padding:0;}
button {height:30px; padding:0 15px; border:1px solid yellowgreen; background:#fff; border-radius:3px;}
button.active {background:yellowgreen;}
.wrap {width:100%; max-width:768px; margin:0 auto;}
.conts {margin-top:20px;}
.cont {border:1px solid black;}
.cont li {padding:20px;}
.cont li:not(:last-child) {border-bottom:1px solid black;}
.left li:nth-child(even), .right li:nth-child(odd) {text-align:right;}
.cont .title span {display:inline-block; padding-bottom:15px; border-bottom:1px solid #bbb;}
​

//value
const titleLeft = [
    "1. Lorem ipsum dolor sit elit.",
    "2. Lorem ipsum dolor sit elit.",
    "3. Lorem ipsum dolor sit elit."
];
const titleRight = [
    "4. Lorem ipsum dolor sit elit.",
    "5. Lorem ipsum dolor sit elit.",
    "6. Lorem ipsum dolor sit elit.",
    "7. Lorem ipsum dolor sit elit."
];

const textLeft = [
    "text1 : Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit beatae, corrupti ut perferendis praesentium odio doloremque asperiores ad excepturi aut!",
    "text2 : Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit beatae, corrupti ut perferendis praesentium odio doloremque asperiores ad excepturi aut!",
    "text3 : Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit beatae, corrupti ut perferendis praesentium odio doloremque asperiores ad excepturi aut!"
];
const textRight = [
    "text4 : Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit beatae, corrupti ut perferendis praesentium odio doloremque asperiores ad excepturi aut!",
    "text5 : Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit beatae, corrupti ut perferendis praesentium odio doloremque asperiores ad excepturi aut!",
    "text6 : Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit beatae, corrupti ut perferendis praesentium odio doloremque asperiores ad excepturi aut!",
    "text7 : Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit beatae, corrupti ut perferendis praesentium odio doloremque asperiores ad excepturi aut!"
];

const title = [titleLeft, titleRight];
const text = [textLeft, textRight];

일단 이렇게 값을 넣어 놓긴 했는데,

이거 보다 더 씜플한 코드가 뭘까 ??

 

//js
const btn = document.querySelectorAll(".btn");
const ul = document.querySelector(".conts ul");

btn.forEach((e, index) => {
    e.addEventListener("click", () => {
        if (index == 0) {
            ul.className = "cont left";
        } else if (index == 1) {
            ul.className = "cont right";
        }

        ul.innerHTML = ""; //reset

        let j = 0;
        while (j < btn.length) {
            btn[j++].classList.remove("active");
        }
        e.classList.add("active"); //button.active

        const titleNum = title[index],
              textNum = text[index];

        titleNum.forEach((k, num) => {
            const li = `
                <li>
                  <div class="title"><span>${k}</span></div>
                  <div class="text"><p>${textNum[num]}</p></div>
                </li>
            `; //li 만들고 title과 text 값 넣어주기
            ul.innerHTML += li; //titleLeft 안에 텍스트 수만큼 li 넣어줌
        });
    });
});

그리고 for문 중첩으로 돌리다가 forEach로 수정한 코드

​

결과

https://jt8udx.csb.app/

Static Template

​

훨씬 더 있어보이는 느낌 ㅎㅋ 아님 말고

​

아무튼 오늘도 편-안 -