jQuery로 선택한 버튼의 이미지 주소를 받아오려고 합니다. 채택완료



이 탭버튼에 대한 이미지를 정상적으로 가져오지 못해서 문제가 발생하고 있습니다.

HTML 페이지는 다음과 같이 구성되어 있고,
Copy
<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는 다음과 같이 따로 처리를 했는데,
Copy
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개

채택된 답변
+20 포인트
Copy
jQuery(document).ready(function () { 
$(".visual_tab ul>li>img").each( 
function(){ 
alert($(this).attr("src")); 
} 
) 
});

의도 하신 바를 정확히 모르겠습니다만, 클릭 했을때 이벤트라고 가정하면

Copy
$(document).ready(function() {
	$('.visual_tab > ul > li > img').each(function(idx) {
		$(this).click(function() {
			alert($(this).attr('src'));
		});
	});
});

만약에 재대로 작동하지 않는다면, 선택자가 잘못 되었을 수도 있습니다.
로그인 후 평가할 수 있습니다

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

부분을 떼고 js코드를 따로 js파일로 만들어 불러 들였는데
잘됩니다.
인터넷익스플로러의 고급설정에서 모든 스크립트오류 알림표시를 체크하고
어디서 에러가 나는지 테스트해 보세요.
로그인 후 평가할 수 있습니다

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

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

로그인
🐛 버그신고