제이쿼리 질문좀 부탁드릴게요 ㅠ
본문
이미지가 여러개라
한꺼번에 호출하면 트래픽 초과할것같아서
클릭할때마다 변경으로 하려하는데.. 조언좀 부탁드릴게요
<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>
답변 2
<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));
이렇게하면되려나
답변을 작성하시기 전에 로그인 해주세요.
