jQuery로 선택한 버튼의 이미지 주소를 받아오려고 합니다.
본문
5개의 탭버튼으로 구성된 페이지를 제작 중인데, 각 탭버튼의 이미지의 주소를 가져오려고 하는데
이 탭버튼에 대한 이미지를 정상적으로 가져오지 못해서 문제가 발생하고 있습니다.
HTML 페이지는 다음과 같이 구성되어 있고,
탭을 제어하기 위한 JS는 다음과 같이 따로 처리를 했는데,
이 버튼의 이미지 주소를 가져오기 위해
jQuery(document).ready(function () {
$(".visual_tab ul>li>img").each(
function(){
alert($(this).attr("src"));
}
)
});
다음과 같이 코드를 js에 붙여도, html 파일에 집어넣어도 alert등이 전혀 작동하질 않습니다.
무엇을 잘못해서 alert등이 먹히지 않는지, 다른 분들의 조언 부탁드립니다.
이 탭버튼에 대한 이미지를 정상적으로 가져오지 못해서 문제가 발생하고 있습니다.
HTML 페이지는 다음과 같이 구성되어 있고,
<script language="javascript" type="text/javascript" src="../js/main.js"></script>
<script language="JavaScript">
function notice_getcookie( name ){
var nameOfcookie = name + "=";
var x = 0;
while ( x <= document.cookie.length )
{
var y = (x+nameOfcookie.length);
if ( document.cookie.substring( x, y ) == nameOfcookie )
{
if ( (endOfcookie=document.cookie.indexOf( ";", y )) == -1 )
endOfcookie = document.cookie.length;
return unescape( document.cookie.substring( y, endOfcookie ) );
}
x = document.cookie.indexOf( " ", x ) + 1;
if ( x == 0 )
break;
}
return "";
}
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
</script>
<style>
#divpop01 {width:250px; position:absolute; left:0px; top:120px; z-index:1000; visibility:hclassden;}
#layer_popup_btn { padding:5px; color:#FFFFFF; background-color:#000000;}
#caption {position:absolute; visibility:hidden;top:-9999px; font-size:0;}
#caption {position:absolute; width:0; height:0; font-size:0; line-height:0; overflow:hidden; visibility:hidden; display:none;}
.visual_0 div {}
.visual_0 .visual_tab_over {position:absolute; width:160px; height:25px; left:100px; top:400px;}
</style>
<div class="wrap" id="visual_main">
<!-- visual_wrap -->
<article class="main_visual">
<!-- visual_content -->
<div class="visual_content">
<!-- visual_obj_group -->
<div class="visual_obj_group">
<div class="visual_0">
<div class="txt_group"><img src="../images/main/m_visual_btn_01_on.png" class="visual_tab_over"><a href="javascript:sub02_01();"><img src="../images/main/m_visual_text_01.png" class="png" alt="1" /></a></div>
<p class="visual_img obj"><img src="../images/main/m_visual_img_01.png" class="png" alt=""/></p>
</div>
<div class="visual_1">
<div class="txt_group"><a href="javascript:sub02_04();"><img src="../images/main/m_visual_text_02.png" class="png" alt="2." /></a></div>
<p class="visual_img obj"><img src="../images/main/m_visual_img_02.png" class="png" alt=""/></p>
</div>
<div class="visual_2">
<div class="txt_group"><a href="javascript:sub03_03();"><img src="../images/main/m_visual_text_03.png" class="png" alt="3"/></a></div>
<p class="visual_img obj"><img src="../images/main/m_visual_img_03.png" class="png" alt=""/></p>
</div>
<div class="visual_3">
<div class="txt_group"><a href="javascript:sub02_03();"><img src="../images/main/m_visual_text_04.png" class="png" alt="4"/></a></div>
<p class="visual_img obj"><img src="../images/main/m_visual_img_04.png" class="png" alt=""/></p>
</div>
<div class="visual_4">
<div class="txt_group"><a href="javascript:sub04_04();"><img src="../images/main/m_visual_text_05.png" class="png" alt="5" /></a></div>
<p class="visual_img obj"><img src="../images/main/m_visual_img_05.png" class="png" alt=""/></p>
</div>
</div>
<!-- //visual_obj_group -->
<!-- visual_bg_group -->
<div class="visual_bg_group">
<p class="visual_bg_01"></p>
<p class="visual_bg_02"></p>
<p class="visual_bg_03"></p>
<p class="visual_bg_04"></p>
<p class="visual_bg_05"></p>
</div>
<!-- //visual_bg_group -->
<!-- visual_tab -->
<div class="visual_tab">
<ul>
<li><img src="../images/main/m_visual_btn_01.png" class="png" alt="듀어토닝"/></li>
<li><img src="../images/main/m_visual_btn_02.png" class="png" alt="여드름"/></li>
<li><img src="../images/main/m_visual_btn_03.png" class="png" alt="안티에이징"/></li>
<li><img src="../images/main/m_visual_btn_04.png" class="png" alt="점/검버섯"/></li>
<li><img src="../images/main/m_visual_btn_05.png" class="png" alt="힐링케어"/></li>
</ul>
</div>
<!-- //visual_tab -->
</div>
<!-- //visual_content -->
</article>
<!-- //visual_wrap -->
</div>
탭을 제어하기 위한 JS는 다음과 같이 따로 처리를 했는데,
var _cur = 0;
var _prev = 0;
var dx_data = [0,0,0,0,0]; //비주얼 오른쪽 이미지 기본값
var _ease = 'easeOutQuad'
var _speed = 1200;
var _time = 5000;
var visualTimer;
var visual_len;
/************************
@ ready
************************/
$(document).ready(function() {
/************************
@ visual tab 마우스 이벤트 등록
************************/
$('.visual_tab ul > li').bind('click mouseenter mouseleave',function(event){
if(event.type == 'mouseenter'){
//마우스 오버
visualOver($(this));
}else if(event.type == 'mouseleave'){
//마우스 아웃
visualOut($(this));
}else{
//마우스 클릭
if(_cur != $(this).index()){
_prev = _cur;
_cur = $(this).index();
visual_change($(this).index());
}
}
});
/************************
@ visual 초기화
************************/
visual_len = $('.visual_obj_group > div').length;
visual_init();
visualTimer = setInterval(autoTimer,_time);
$('.visual_content').bind('mouseenter mouseleave',function(event){
if(event.type == 'mouseenter'){
clearInterval(visualTimer)
// console.log('enter');
}else{
visualTimer = setInterval(autoTimer,_time);
// console.log('leave');
}
});
});
/************************
@ visual tab over
************************/
function visualOver(target){
var _target = target;
if(!_target.hasClass('current')){
_target.find('p.title').stop().animate({'color':'#fff'},600,'easeOutExpo');
_target.find('p.bg').stop().animate({'background-color':'#c9a66e','border-right-color':'#c9a66e','opacity':'1'},600,'easeOutExpo');
//if(!_target.hasClass('last'))_target.find('p.bg').stop().animate({},600,'easeOutExpo');
}
}
/************************
@ visual tab out
************************/
function visualOut(target){
var _target = target;
if(!_target.hasClass('current')){
_target.find('p.title').stop().animate({'color':'#444'},600,'easeOutExpo');
_target.find('p.bg').stop().animate({'background-color':'#fff','border-right-color':'#d9d9d9','opacity':'0.8'},600,'easeOutExpo');
}
}
/************************
@ visual change 함수
************************/
function visual_change(n){
var c = n;
//메뉴
var _target = $('.visual_tab ul > li:eq('+n+')');
$('.visual_tab ul > li:eq('+n+')').addClass('current').siblings().removeClass('current');
_target.siblings().find('p.title').stop().animate({'color':'#444'},600,'easeOutExpo');
// 클릭할 때 탭 이미지도 변경되도록
var tabMenu = $("#visual_tab ul>li>img");
_target.siblings().find('p.bg').stop().animate({'background-color':'#fff','border-right-color':'#d9d9d9','opacity':'0.8'},600,'easeOutExpo');
//배경
var b_target = $('.visual_bg_group > p:eq('+_cur+')');
b_target.stop().animate({'opacity':'1'},900).siblings().stop().animate({'opacity':'0'},300);
//이전
var p_target = $('.visual_obj_group').find('.visual_'+_prev);
p_target.find('.txt_group').stop().clearQueue().animate({'opacity':'0'},300,_ease,function(){$(this).css('display','none')});
p_target.find('.visual_img').stop().clearQueue().animate({'opacity':'0'},300,_ease,function(){$(this).css('display','none')});
//현재
var c_target = $('.visual_obj_group').find('.visual_'+_cur);
c_target.find('.txt_group').stop().clearQueue().css({'display':'block','opacity':'0'}).delay(300).animate({'opacity':'1','left':'0'},_speed,_ease);
c_target.find('.visual_img').stop().clearQueue().css({'display':'block','opacity':'0','right':'-50px'}).delay(300).animate({'opacity':'1','right':dx_data[_cur]+'px'},_speed,_ease);
}
function visual_init(){
$('.visual_obj_group > div').each(function(){
$(this).find('.txt_group').css({'display':'none','opacity':'0'});
$(this).find('.visual_img').css({'display':'none','opacity':'0'});
});
visualOver($('.visual_tab ul > li:eq(0)'));
visual_change(_cur);
}
function autoTimer(){
_prev = _cur;
_cur = (_cur == visual_len-1)?0:_cur+1;
visualOver($('.visual_tab ul > li:eq('+_cur+')'));
visual_change(_cur);
}
이 버튼의 이미지 주소를 가져오기 위해
jQuery(document).ready(function () {
$(".visual_tab ul>li>img").each(
function(){
alert($(this).attr("src"));
}
)
});
다음과 같이 코드를 js에 붙여도, html 파일에 집어넣어도 alert등이 전혀 작동하질 않습니다.
무엇을 잘못해서 alert등이 먹히지 않는지, 다른 분들의 조언 부탁드립니다.
답변 2
jQuery(document).ready(function () {
$(".visual_tab ul>li>img").each(
function(){
alert($(this).attr("src"));
}
)
});
의도 하신 바를 정확히 모르겠습니다만, 클릭 했을때 이벤트라고 가정하면
$(document).ready(function() {
$('.visual_tab > ul > li > img').each(function(idx) {
$(this).click(function() {
alert($(this).attr('src'));
});
});
});
만약에 재대로 작동하지 않는다면, 선택자가 잘못 되었을 수도 있습니다.
부분을 떼고 js코드를 따로 js파일로 만들어 불러 들였는데
잘됩니다.
인터넷익스플로러의 고급설정에서 모든 스크립트오류 알림표시를 체크하고
어디서 에러가 나는지 테스트해 보세요.
답변을 작성하시기 전에 로그인 해주세요.