Tab 메뉴에서 tab의 이미지 주소값을 얻어오려고 합니다
본문
5개의 탭버튼으로 구성된 페이지를 제작 중인데, 각 탭버튼의 이미지의 주소를 가져오려고 하는데
이 탭버튼에 대한 이미지를 정상적으로 가져오지 못해서 문제가 발생하고 있습니다.
이렇게 구성되어 있는데 visual_tab의 이미지 주소를 가져오기 위해서
var tabMenu = $("#visual_tab ul>li>img"); 이런 식으로 해서 값을 찍어보면 object Object로만 찍히는데
정상적으로 찍히게 하려면 어떻게 해야 되는지 다른 분들의 조언 부탁드립니다.
이 탭버튼에 대한 이미지를 정상적으로 가져오지 못해서 문제가 발생하고 있습니다.
<!-- 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 -->
이렇게 구성되어 있는데 visual_tab의 이미지 주소를 가져오기 위해서
var tabMenu = $("#visual_tab ul>li>img"); 이런 식으로 해서 값을 찍어보면 object Object로만 찍히는데
정상적으로 찍히게 하려면 어떻게 해야 되는지 다른 분들의 조언 부탁드립니다.
답변 3
jQuery(document).ready(function () {
$(".visual_tab ul>li>img").each(
function(){
alert($(this).attr("src"));
}
)
});
$(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_tab ul>li>img').each(
function(){
alert($(this).attr('src'));
}
)
});
말씀하신대로 해서 추가했는데 작동이 되질 않네요 ㅎㅎ 제가 뭘 잘못해서 작동을 못하는 걸까요?
저는 잘되는데요.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<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 -->
<script type="text/javascript">
<!--
jQuery(document).ready(function () {
$(".visual_tab ul>li>img").each(
function(){
alert($(this).attr("src"));
}
)
});
//-->
</script>
흐음....alert창으로 뜨질 않네요..유일한 차이점이라면
기능을 정의해놓은 js 파일을 따로 불러온다는 점 밖에 없는데..
많은 도움이 되었습니다. 감사합니다.
답변을 작성하시기 전에 로그인 해주세요.