채택완료

Tab 메뉴에서 tab의 이미지 주소값을 얻어오려고 합니다

2014-06-09 (월) 13:17:13 5,284
5개의 탭버튼으로 구성된 페이지를 제작 중인데, 각 탭버튼의 이미지의 주소를 가져오려고 하는데

이 탭버튼에 대한 이미지를 정상적으로 가져오지 못해서 문제가 발생하고 있습니다.
Copy
<!-- 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개 / 댓글 2개

채택된 답변
+20 포인트
2014-06-09 (월) 13:48:32
Copy
jQuery(document).ready(function () {
	$(".visual_tab ul>li>img").each(
		function(){
			alert($(this).attr("src"));
		}
	)
});

답변에 대한 댓글 1개

$(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'));
}
)

});

말씀하신대로 해서 추가했는데 작동이 되질 않네요 ㅎㅎ 제가 뭘 잘못해서 작동을 못하는 걸까요?

많은 도움이 되었습니다. 감사합니다.

2014-06-09 (월) 15:21:07
저는 잘되는데요.



<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>

답변에 대한 댓글 1개

흐음....alert창으로 뜨질 않네요..유일한 차이점이라면
기능을 정의해놓은 js 파일을 따로 불러온다는 점 밖에 없는데..

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