SIR
목록으로

제이쿼리 질문좀 부탁드릴게요 ㅠ 채택완료

바바트컨트롤
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전 조회 1,841
답변 2
목록

이미지가 여러개라

한꺼번에 호출하면 트래픽 초과할것같아서

클릭할때마다 변경으로 하려하는데.. 조언좀 부탁드릴게요

 

Copy 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<ul class="tabs">
    <li class="tab-link" data-img="ts01">메뉴_하나</li>
    <li class="tab-link" data-img="ts02">메뉴_둘</li>
    <li class="tab-link" data-img="ts03">메뉴_셋</li>
</ul>
<div>
    <img id="img_form_url" src="./img/ts01.gif" alt="">
</div>
<script>
    $(function() {
         $('.tabs .tab-link').click(function() {
             //여기안에  클릭한 li의 data-img를 활용해서 
             //img_form_url 안에 src를 바꾸려고하는데.. 조언좀..
              
   });
});
</script>
#jquery #제이쿼리

답변 2개

채택된 답변
+20 포인트

Copy 
<ul class="tabs">
    <li class="tab-link" data-img="ts01">메뉴_하나</li>
    <li class="tab-link" data-img="ts02">메뉴_둘</li>
    <li class="tab-link" data-img="ts03">메뉴_셋</li>
</ul>
<div>
    <img id="img_form_url" src="./img/ts01.gif" alt="">
</div>
<script>
    $(function() {
        $('.tabs .tab-link').on('click', function() {
            //여기안에  클릭한 li의 data-img를 활용해서
            //img_form_url 안에 src를 바꾸려고하는데.. 조언좀..
            var src = $(this).data('img');
            if (src) {
                $('#img_form_url').attr('src', function() {
                    return $(this).attr('src').replace(/([^\/]+)(\.[A-Za-z]+)$/, src + '$2');
                });
            }
            console.log($('#img_form_url').attr('src'));
        });
    });
</script>
로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

$img = $(this).attr("data-img");

$("#img_form_url).attr("src", replace($("#img_form_url).attr(), "/img/" + $img));

 

이렇게하면되려나

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고