jQuery로 선택한 버튼의 이미지 주소를 받아오려고 합니다. 채택완료
5개의 탭버튼으로 구성된 페이지를 제작 중인데, 각 탭버튼의 이미지의 주소를 가져오려고 하는데
이 탭버튼에 대한 이미지를 정상적으로 가져오지 못해서 문제가 발생하고 있습니다.
HTML 페이지는 다음과 같이 구성되어 있고,
탭을 제어하기 위한 JS는 다음과 같이 따로 처리를 했는데,
이 버튼의 이미지 주소를 가져오기 위해
jQuery(document).ready(function () {
$(".visual_tab ul>li>img").each(
function(){
alert($(this).attr("src"));
}
)
});
다음과 같이 코드를 js에 붙여도, html 파일에 집어넣어도 alert등이 전혀 작동하질 않습니다.
무엇을 잘못해서 alert등이 먹히지 않는지, 다른 분들의 조언 부탁드립니다.
<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 -->
<pre> <!-- 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>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);
}
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
11년 전
<div><div>jQuery(document).ready(function () { </div>
<div>$(".visual_tab ul>li>img").each( </div>
<div>function(){ </div>
<div>alert($(this).attr("src")); </div>
<div>} </div>
<div>) </div>
<div>}); </div>
<div>의도 하신 바를 정확히 모르겠습니다만, 클릭 했을때 이벤트라고 가정하면
</div>
<div>$(document).ready(function() {</div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span>$('.visual_tab > ul > li > img').each(function(idx) {</div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span>$(this).click(function() {</div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span>alert($(this).attr('src'));</div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span>});</div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span>});</div>
<div>});</div>
<div>만약에 재대로 작동하지 않는다면, 선택자가 잘못 되었을 수도 있습니다.
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
11년 전
부분을 떼고 js코드를 따로 js파일로 만들어 불러 들였는데
잘됩니다.
인터넷익스플로러의 고급설정에서 모든 스크립트오류 알림표시를 체크하고
어디서 에러가 나는지 테스트해 보세요.
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인전체 질문 목록
채택
답변대기
답변대기
채택
답변대기