초보 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
위 링크애서 해당 엘리먼트 하위 요소의 갯수를 채크하고
위 링크에서 해당 갯수만큼 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>
