다른 모든 목록 항목에서 클래스를 제거하십시오

Question

다른 사람들로부터 도움을 받았지만 답변이 너무 넓어서 ... 저는 자바 스크립트에서 newb로 사용할 수 없으므로 꽤 답답합니다. (지난 3 일 동안 시도한 모든 것이 효과가 없습니다.) 작업 사이트는 여기에 있습니다 : http://www.studioimbrue.com/beta 문제는 미리보기 이미지를 사용하여 한 번 클릭하면 .selected 클래스가 제대로 추가된다는 것입니다. 그러나 다른 것을 클릭하면 다른 선택된 축소판에서 .selected 클래스를 제거하지 못합니다. 만약 당신이 내가 가지고있는 코드를 바로 잡을 수 있다면, 그것은 놀라 울 것이고, 내가 잘못한 것을 설명하고 싶다면, 바로 가라.

$(document).ready(function(){ 
    var activeOpacity = 1.0, 
     inactiveOpacity = 0.6, 
     fadeTime = 100, 
     clickedClass = "selected", 
     thumbs = "#list li"; 

    $(thumbs).fadeTo(1, inactiveOpacity); 

    $(thumbs).hover(
     function(){ 
      $(this).fadeTo(fadeTime, activeOpacity); 
     }, 
     function(){ 
      // Only fade out if the user hasn't clicked the thumb 
      if(!$(this).hasClass(clickedClass)) { 
       $(this).fadeTo(fadeTime, inactiveOpacity); 
      } 
     }); 
    $(thumbs).click(function() { 
     // Remove selected class from any elements other than this 
     var previous = $(thumbs+'.'+clickedClass).eq(); 
     var clicked = $(this); 
     if(clicked !== previous) { 
      previous.removeClass(clickedClass); 
     } 
     clicked.addClass(clickedClass).fadeTo(fadeTime, activeOpacity); 
    }); 
}); 

Answer 1

는 나는이만큼 간단하다고 생각 :

$(thumbs).click(function() { 
    var li = $(this); 
    var alreadySelected = li.hasClass('selected'); 

    // Remove selected class from any elements other than this 
    $('#list li').removeClass(clickedClass).fadeTo(fadeTime, inactiveOpacity); 

    li.addClass(clickedClass).fadeTo(((alreadySelected) ? 0 : fadeTime), activeOpacity); 
}); 

당신은 이미 클래스가있는 항목을 계산해야 만에 다시 추가 한 후 그들 모두에서 제거하지 마십시오 하나가 클릭되었습니다.

편집 : 이것은 깜박임을 제거해야합니다.

Answer 2

사람의 미리보기 이미지를 언급하는 경우 저에게 잘 작동합니다. 일부 메뉴 항목은 작동하지 않지만.