EN
52
2021-05-16 14:16:00
3
266

자바스크립트 ID변경 질문입니다.


안녕하십니까? 공부하던 도중에 질문이 있어서, 고수분들 답변을 얻고자 글남겨 봅니다.

for문을 돌리면서 click 했을때 #id값이 1씩 증가하면서 텍스트도 바뀌는 동작을 만들고 싶은데,

텍스트쪽은 구현을 했지만, ID값은 어떻게 변경해야 하는지 알려주실수 있나요?


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>
<body>
    <div class="text_box">
        <p id="number">test1</p>
    </div>
    <div class="button"><p>click</p></div>
    <script src="main.js"></script>
</body>
</html>
.text_box{
    width: 500px;
    height: 300px;
    background: orange;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    text-align: center;
    display: flex;
}

.button {
    width: 50px;
    height: 50px;
    background: #000;
    margin: 0 auto;
    color: #fff;
    display: flex;
    justify-content: center;
    margin-top: 40px;
}
$(() => {
    const TITLE_NUM = 1;

    let textData = [
        "test2",
        "test3",
        "test4",
        "test5",
    ]
    var count = 0;

    let onSelectFocus = (x) => {
        let text = textData[x];
        var count = 0;
        $(`.text_box #number${count++}`).text(text);
    }

    for (let i = 0; i < TITLE_NUM; i ++) {
        $('.button').on('click', function(){
            onSelectFocus(i++);
        })
    }
})


div class="button" 클릭했을때 #number1,#number2,#number3 ... 이런식으로 증가하면서

textData의 텍스트도 보여지게 만들고 싶습니다. (텍스트는 count를 빼면 잘 작동합니다.)

var count = 0; 으로 설정하고 count++ 해도 id값이 변경이 되질 않네요.

앞으로 button 클릭으로 이미지 변경도 할 예정입니다. for문으로 작동하게 할수 없는건가요?

0
  • 답변 3

  • 킁킁탐정
    844
    2021-05-16 18:23:01

    질문의 내용이 난해합니다. 다음을 추가로 설명해주시면 답변하는데 도움이 될꺼 같습니다.


    1. id를 변경해야하는 이유와 목적의 설명이 필요합니다.

    2. 단순하게 for문으로 textData 배열의 요소를 출력하는것은 애니메이션도 아닐뿐더러 거의 항상 마지막 값만 출력하게됩니다. 이렇게 해야하는 목적이 무엇인지 설명이 필요합니다.

    3. TITLE_NUM으로 제한하는 이유도 함게 설명이 필요합니다.


  • EN
    52
    2021-05-16 21:33:08

    답변 감사합니다.

    너무 애매하게 글을 올려놔서 죄송합니다ㅜㅜ


    1. ID값을 변경할려고 하는 이유가, 아이디 값마다 구글 태그 매니저를 사용하려 하고 있습니다.

        그래서 연습용으로 만들어 보고 있던 중이였습니다.

    2. 텍스트박스에 대사가 들어가는 애니메이션을 만들었습니다. 위에는 질문용이라서 단순하게 표현되었습니다.

        그래서 for문을 사용했고. 텍스트가 변경하면서 이미지도 변경하게 되어 있습니다.

    3. title_num으로 제한한것은 특별한 이유는 없었습니다..


    for문으로는 만들수 없는걸까요?

  • 킁킁탐정
    844
    2021-05-16 23:34:46

    태그 구조와 스크립트 코드가 일치하지 않습니다. number1, number2, number3이 존재하지 않습니다. 그런데, $('#numberN')으로 데이터를 얻으려고 하고 있습니다. 그러므로 당연하게 text() 함수는 동작하지 않습니다.

    그래서 다음과 같은 태그 구조를 하시면 됩니다.

    <div class="text_box">
    <p id="number1">test1</p>
    <p id="number2">test2</p>
    <p id="number3">test3</p>
    </div>


    그러나 질문 내용은 id를 변경하는것으로 되어있어서 단순하게 id를 text와 함께 변경해야 한다면 다음 처럼 하시면 됩니다.

    <div class="text_box">
    <p id="number0">test1</p>
    </div>

    <script>
    // 0부터 시작
    var count = 0;
    // 현재 number 항목을 얻음
    var n = $(".text_box #number" + count);
    // 새로운 number를 할당
    count = count + 1;
    // 기존 number에 해당하는 요소의 텍스트를 변경
    n.text("new text");
    // 새로운 number 할당
    n.attr("id", "number" + count);
    </script>


  • 로그인을 하시면 답변을 등록할 수 있습니다.