초보 jquery 질문드립니다.

초보 jquery 질문드립니다.

QA

초보 jquery 질문드립니다.

본문

<img src="./images/test01.jpg" id="change01">

 

if(width < 768)

{

$('#change01').attr('src', './images/test01_m.jpg')

}

 

 

이렇게 change01 아이디가 768 해상도 이하일때 파일명 뒤에 _m을 붙여주고 있습니다.

이게 갯수가 늘어나다보니 일이 너무 많아지는듯하여.

혹시 스크립트 또는 php로 처리가 가능한지 궁금합니다.

 

768보다 작을때 change0~ 아이디를 가진 애들 파일명의 확장자 앞에 _m을 붙여라 라고

스크립트로 어떻게 얘길해야할까요 ㅠ

이 질문에 댓글 쓰기 :

답변 3



<img src="./images/test01.jpg" class="change"> 
<script>

    $(document).ready(function(){

        $(".change").each(function(){

            var $this = $(this);

            var src = $(this).attr('src');

            if($this.outerWidth()<768){
                var arr= src.split(".");

                var extension = arr[arr.length-1];
                var replace_src = src.replace('.'+extension,'_m.'+extension);
                $this.attr('src',replace_src)
            }

        })

    })

</script> 

for 로 돌리시면됩니다~

공부하시는 중이시니 팁을 드리자면

 

https://solbel.tistory.com/1455

위 링크애서 해당 엘리먼트 하위 요소의 갯수를 채크하고

 

https://lnsideout.tistory.com/entry/jQuery-%EC%A0%9C%EC%9D%B4%EC%BF%BC%EB%A6%AC-each-foreach-for%EB%B0%98%EB%B3%B5%EB%AC%B8-%EC%98%88%EC%A0%9C

위 링크에서 해당 갯수만큼 for 를 돌리면됩니다~

참조하세요.

<img id="change01" class="change00" src="./images/test01.jpg">
<img id="change02" class="change00" src="./images/test02.jpg">

<script>
$(function() {
    $("img.change00").each(function() {
        if ($(this).width() < 768)
        {
            const id = $(this).attr('id');
            $(this).attr('src', './images/'+id+'_m.jpg');
        }
    });
});
</script>
 

답변을 작성하시기 전에 로그인 해주세요.
전체 1,020
QA 내용 검색

회원로그인

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