지금 이 코드를 간결하게 바꿀 수 있을까요?

지금 이 코드를 간결하게 바꿀 수 있을까요?

QA

지금 이 코드를 간결하게 바꿀 수 있을까요?

본문

자바스크립트를 공부하면서 적용하고 있는데요..

저한테는 이게 최선인 거 같아서요..

 


<ul id="txt-box">
    <li>
        <span id="ani-1">상상만 했던 일이 현실이 됩니다.</span>
    </li>
    <li>
        <span id="ani-2">당신의 삶을 변화시킬 5G</span>
    </li>
    <li>
        <span id="ani-3">줄어든 로딩만큼 상상을 초월하는 놀라운 속도</span>
    </li>
    <li>
        <span id="ani-4">언제 어디서나 당신의 실시간 게임 플레이</span>
    </li>
    <li>
        <span id="ani-5">5G 기술로 달라진 삶의 속도를 체크</span>
    </li>
    <li>
        <span id="ani-6">일상이 스마트해지는 에코시스템</span>
    </li>
</ul>
 
<script>
    window.onload = function () {
        var anitxt1 = document.getElementById('ani-1');
        var anitxt2 = document.getElementById('ani-2');
        var anitxt3 = document.getElementById('ani-3');
        var anitxt4 = document.getElementById('ani-4');
        var anitxt5 = document.getElementById('ani-5');
        var anitxt6 = document.getElementById('ani-6');
        window.setTimeout(function () {
            anitxt1.classList.add('on');
        }, 100);
        window.setTimeout(function () {
            anitxt2.classList.add('on');
        }, 200);
        window.setTimeout(function () {
            anitxt3.classList.add('on');
        }, 300);
        window.setTimeout(function () {
            anitxt4.classList.add('on');
        }, 400);
        window.setTimeout(function () {
            anitxt5.classList.add('on');
        }, 500);
        window.setTimeout(function () {
            anitxt6.classList.add('on');
        }, 600);
    }
</script>

 

#txt-box span 태그에 on 클래스 추가해주는 것인데, 0.1초 간격으로 추가해주는 것입니다.

뭔가 덕지덕지 붙여놓은 것 같아서 .. 이 소스를 간결하게 바꿀 수 있을까요?

부탁드립니다.

 

이 질문에 댓글 쓰기 :

답변 2


<script>
    window.onload = function () {
        <?php for ($i=1; $i < 7; $i++) { ?>
            var anitxt<?php echo $i; ?> = document.getElementById('ani-<?php echo $i; ?>');
            window.setTimeout(function () { anitxt<?php echo $i; ?>.classList.add('on'); }, <?php echo $i * 100; ?>);
        <?php } ?>
    }
</script>

28라인을 8라인으로 줄여봤습니다. ^.^

자바스크립트로 만드셔도 되겠지만 이해하시기 싶게 PHP로 만들어봤습니다.

동일한 방법으로 자바스크립트 만드셔도 같은 효과를 보실수 있을 겁니다.

 

@카알주님은 자바스크립트 부분을 덧붙여서 하자면 배열로 처리하셔서 하셔도 될듯합니다.

$i 값을 배열에 넣어서요


<?php
$array[1] = "상상만 했던 일이 현실이 됩니다";
$array[2] = "당신의 삶을 변화시킬 5G";
$array[3] = "줄어든 로딩만큼 상상을 초월하는 놀라운 속도";
?>
<ul id="txt-box">
<?php
   for ($i=1; $i < count($array); $i++) {
?>
    <li>
        <span id="ani-<?php echo $i ?>"><?php echo $array[$i] ?></span>
    </li>
<?php  } ?>
</ul>
답변을 작성하시기 전에 로그인 해주세요.
전체 36
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT