자매 div의 텍스트 값을 Jquery와 함께 표시 하시겠습니까?

Question

'right_arrow'클래스를 클릭 한 후 아래의 'title_head'div에서 다음 텍스트의 값을 가져 오려고합니다.

<div class="header"> 
    <div class="col-md-8 title"> 
     <div class="title_head">SHIRT</div> 
     <div class="title_head" style="display:none">COLLAR</div> 
     <div class="title_head" style="display:none">BUTTON</div> 
     <div class="title_head" style="display:none">SLEEVE</div> 
    </div> 
    <div class="col-md-4 right_arrow"><img src="img/arrows-right.png" alt=""></div> 
</div> 

내 jQuery 코드는 다음과 같습니다.

var current = $('.title_head:visible').text(); 
var first = $('.title_head').first().text(); 
var last = $('.title_head').last().text(); 

$('.right_arrow').click(function(){ 
    if(current == last){ 
     $('.right_arrow').css('opacity','0.3'); 
     $('.right_arrow').css('cursor','default'); 
    }else{ 
     $(current).css('display','none'); 
     var val = $('.title_head').nextAll('.title_head:first').text(); 
     var next_val = $('.title_head').text(val); 
     alert(next_val); 
    } 
}); 

내가 겪고있는 문제는 'next_val'값을 경고 할 때 객체 배열을 반환한다는 것입니다. 다른 div의 모든 값을 "COLLARBUTTONSLEEVE"가 아닌 "COLLAR", "BUTTON", "SLEEVE"와 같은 전체 값으로 가져 오는 것이 좋습니다.

나는 또한 다음 요소 텍스트를 표시로 표시하고 텍스트 슬라이더와 같은 이전에 표시되는 텍스트 정렬을 숨길 필요가 있습니다.

분명히하는 것이 좋겠습니다. 사전에 도움을 주셔서 감사합니다.

Answer 1

좀 더 이런 일에 자바 스크립트를 다시 작성할 수 :

var items = $('.title_head'), 
    index = 1; //start at position 

$('.right_arrow').click(function(){ 

    if(items.length > index) { 
     $('.title_head').hide(); 

     var $nextEl = $($('.title_head')[index++]), 
      val = $nextEl.html(); 

     $nextEl.show(); 
     alert(val); 
    } 
    if(items.length === index) { 
     $('.right_arrow').css('opacity','0.3'); 
     $('.right_arrow').css('cursor','default'); 
    } 
}); 

가 바이올린을 참조하십시오http://jsfiddle.net/rK4KR/1/

당신이 노드의 배열을 다시 반환됩니다 .title_head를 쿼리 할 때. 우리는 단순히 배열의 각 위치를 살펴보고 값을 파싱 할 수 있습니다. 그렇게하면 어떤 노드가 표시되는지 항상 확인하지 않아도됩니다.