목록 항목 위로 마우스를 가져 가면 jQuery로 클래스 추가 및 제거시 문제가 발생합니다.

Question

위로 가져 가면 목록 항목에 클래스를 추가 한 다음 제거하고 다른 목록 항목에 추가하면 다른 목록 항목에 추가됩니다. 끝났어. 여기

내가 시도 내용은 다음과 같습니다

jQuery를 -

$(document).ready(function() { 
     $("#results").text("Tournaments"); 
     $("#Tournaments").addClass("box-active"); 
     $("#box ul li").hover(function() { 
      var show = $(this).attr('id'); 
      $("#results").text(show); 
      $("#box ul li").each(function() { 
       $(this).removeClass("box-active"); 
       }); 
      $("#box ul li#" + show).addClass("box-active"); 
      }); 
     }); 

HTML -

<div id="box"> 
     <ul> 
      <li id="Tournaments">Tournaments</li> 
      <li id="Join">Join</li> 
      <li id="Forums">Forums</li> 
      <li id="GameBattles">GameBattles</li> 
      <li id="Practice">Practice</li> 
     </ul> 
     <p>Hovering over: <span id="results"></span></p> 
    </div> 

내가 항목 위에 마우스를 가져가 클래스를 변경,하지만 난 다른 위에 마우스를 올려 경우 하나는 내가 처음 봤던 항목을 덮는 클래스를 제거하지만, 내가 떠 맡은 새로운 아이템에는 클래스를 추가하지 않는다. 왜, 그리고 어떤 도움을 주시면 감사하겠습니다.

Answer 1

나는 this question에 대한 대답이 도움이 될 것이라고 생각합니다.

는 다음과 같이 될 수 있을까 :

$('#box ul li').hover(function(){ 
     $(this).addClass('box-active'); 
     $("#results").text($(this).attr('id')); 
    }, 
    function(){ 
     $(this).removeClass('box-active'); 
     $("#results").text(''); 
    }); 

편집 : 당신은 리튬 유혹 중지 할 때이 원하는 기능이나 하나 들어하지

Answer 2

, 아무 이유라면이 확실하지 클래스를 제거합니다

: 당신은 리튬 자체에 있기 때문에,

$("li#" + show).addClass("box-active"); 

하지만 더 나은 : 검색 시도에서 여러 ID 태그를 넣어

$(this).addClass('box-active'); 

나는이 작동하는지 모르겠지만,이 시도 :

$(document).ready(function() { 
    $("#results").text("Tournaments"); 
    $("#Tournaments").addClass("box-active"); 
    $("#box ul li").hover(function() { 
     $("#results").text($(this).attr('id')); 
     $("#box ul li.box-active").removeClass('box-active'); 
     $(this).addClass('box-active'); 
    }); 
}); 

을