jquery .click() 이벤트 후 배경색 재설정

Question

트랙 목록이 있는데 트랙을 클릭하면 플레이어가 확장되고 호버 배경색으로 트랙이 선택됩니다. 이것은 정상적으로 작동하지만 다른 트랙을 클릭하면 이전 트랙에서 마우스 오버 배경색이 제거되지 않습니다. http://shacktown.com

$(document).ready(function(){ 
     $(".track").click(function(){ 
      if ($(this).find('.trackPlayer').is(':hidden')) { 
       $('.trackPlayer').slideUp(); 
       $('.trackPlayer').css('background-color', '#331100'); 
       $(this).css('background-color', '#997766'); 
       $(this).find('.trackPlayer').slideDown(); 
      } 
     }); 
    }); 

Answer 1

$(document).ready(function(){ 
    $(".track").click(function(){ 
     if ($(this).find('.trackPlayer').is(':hidden')) { 
      //removing color from prev. track 
      $(".selectedTrack").css('background-color', '#defaultcolorgoeshere').removeClass("selectedTrack"); 
      $('.trackPlayer').slideUp(); 
      $('.trackPlayer').css('background-color', '#331100'); 
      $(this).css('background-color', '#997766'); 
      $(this).addClass("selectedTrack"); 
      $(this).find('.trackPlayer').slideDown(); 
     } 
    }); 
}); 

Answer 2

나는 당신이 당신의 코드를 상당히 단순화 할 수있을 것 : 여기 여기에 사용하고있어 코드는 테스트 링크입니다. 무엇보다도 클래스를 사용하여 스타일을 적용하면 코드를보다 관리하기 쉽고 읽기 쉽도록 만들 수 있습니다. jQuery 메서드로 작업 할 때 연결을 사용할 수도 있습니다. 성능이 향상됩니다.

$(document).ready(function() { 
    $(".track").click(function() { 
     if ($(this).find('.trackPlayer').is(':hidden')) { 
      // remove styles and hide the trackPlayer from the activeTrack 
      $('.activeTrack').removeClass('activeTrack').find('.trackPlayer').slideUp(); 

      // apply styles and show the trackPlayer to the clicked track 
      $(this).addClass('activeTrack').find('.trackPlayer').slideDown(); 
     } 
    }); 
}); 

그리고 CSS :

.trackPlayer { 
    display:none; 
    background-color: #331100; 
} 
.activeTrack { 
    background-color: #997766; 
} 

이 바이올린 : 이것은 내가 어떻게 할 것입니다. http://jsfiddle.net/tah11u11/1/