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 포인트
11년 전
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'));
});
});
});
만약에 재대로 작동하지 않는다면, 선택자가 잘못 되었을 수도 있습니다.
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
11년 전
부분을 떼고 js코드를 따로 js파일로 만들어 불러 들였는데
잘됩니다.
인터넷익스플로러의 고급설정에서 모든 스크립트오류 알림표시를 체크하고
어디서 에러가 나는지 테스트해 보세요.
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인