작동하지 않는 다음 div로 이동

Question

나는 다음 수신기 요소로 이동하기 위해 많은 thigs를 시도했다. 키 수신기를 위해 쥐덫을 사용하고 있고 선택된 항목이 있는지 확인한 후 다음 div를 찾으려고 노력하고 있지만 보이지 않는다. 어떤 아이디어라도 찾았습니까?

HTML (이 DIV 항목의 많은이 있습니다) :

<div class="item"> 
<a href="#"> 
    <div class="item-flip"> 
     <div class="item-inner"> 
      <img src="#"> 
     </div> 
      <div class="item-details"> 
       <div class="item-details-inner"> 
        <div class="down-details"> 
        <div class="rating" data-content="9.5"> 
        <i class="icon icon-star"></i>9.5 
        </div> 
        <span class="year">2011</span> 
        <span>Go</span> 
       </div> 
      </div> 
     </div> 
    </div> 
</a> 
</div> 

자바 스크립트

Mousetrap.bind("right", function() { 
    if($('.item-flip selected').length){ 
     var current = $('.item-flip selected'); 
     $('.selected').removeClass('selected'); 
     var el = current.next(); 
     el.addClass('selected'); 
    } 
    else{ 
     $('.item-flip').first().addClass('selected') 
    } 
}); 

Answer 1

나는 다음 내 코드에서 코드를 해결책을 파악하는 방법을 시도했다. 관심의

점은 다음과 같습니다

• 하면 다음 요소를 얻으려면 $('.item-flip.selected')

• 에 $('.item-flip selected')에서 변경해야하는 두 개의 클래스를 가진 요소를 선택하려면이 clossest div의 아버지를 찾기 위해 필요 그런 다음 item-flip div를 검색하십시오. 그래서 var el = current.next();에서 당신이 변경해야 var el = current.closest('.item').next().find('.item-flip');

$(function() { 
 
    Mousetrap.bind("right", function(e) { 
 
    if($('.item-flip.selected').length){ 
 
     var current = $('.item-flip.selected'); 
 
     $('.selected').removeClass('selected'); 
 
     var el = current.closest('.item').next().find('.item-flip'); 
 
     el.addClass('selected'); 
 
    } 
 
    else{ 
 
     $('.item-flip').first().addClass('selected') 
 
    } 
 
    }); 
 
});

.selected { 
 
    background-color: red; 
 
}

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> 
 
<script src="https://rawgit.com/ccampbell/mousetrap/master/mousetrap.js"></script> 
 

 
<div class="item"> 
 
    <a href="#"> 
 
     <div class="item-flip"> 
 
      <div class="item-inner"> 
 
       <img src="#"> 
 
      </div> 
 
      <div class="item-details"> 
 
       <div class="item-details-inner"> 
 
        <div class="down-details"> 
 
         <div class="rating" data-content="9.5"> 
 
          <i class="icon icon-star"></i>9.5 
 
         </div> 
 
         <span class="year">2011</span> 
 
         <span>Go</span> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </a> 
 
</div> 
 
<div class="item"> 
 
    <a href="#"> 
 
     <div class="item-flip"> 
 
      <div class="item-inner"> 
 
       <img src="#"> 
 
      </div> 
 
      <div class="item-details"> 
 
       <div class="item-details-inner"> 
 
        <div class="down-details"> 
 
         <div class="rating" data-content="9.5"> 
 
          <i class="icon icon-star"></i>9.5 
 
         </div> 
 
         <span class="year">2011</span> 
 
         <span>Go</span> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </a> 
 
</div> 
 
<div class="item"> 
 
    <a href="#"> 
 
     <div class="item-flip"> 
 
      <div class="item-inner"> 
 
       <img src="#"> 
 
      </div> 
 
      <div class="item-details"> 
 
       <div class="item-details-inner"> 
 
        <div class="down-details"> 
 
         <div class="rating" data-content="9.5"> 
 
          <i class="icon icon-star"></i>9.5 
 
         </div> 
 
         <span class="year">2011</span> 
 
         <span>Go</span> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </a> 
 
</div>