div에 클래스를 추가하고 제거하는 방법은 무엇입니까?

Question

나는 루프에서 일부 div를 가졌고 클릭 한 것에 따라 클래스를 변경하려고합니다.

내 HTML : 아래 코드를 참조하십시오

<div class="Active"></div> 
<div class="inactive"></div> 
<div class="inactive"></div> 

내 jQuery를 :

$(document).ready(function() 
{ 
    $('div.inactive').on('click',function() 
    { 
     //run some codes 
     $(this) 
      .removeClass('inactive') 
      .addClass('Active') 
      .closest('div') 
      .find('.Active') 
      .removeClass('Active') 
      .addClass('inactive'); 
    }); 
}); 

활성 클래스가있는 사업부가 표시되고있는 현재의 선택이다. 클릭 할 수 없습니다. 비활성 클래스가있는 div는 클릭 할 수있는 옵션입니다. 사용자가 비활성 div를 클릭하면 해당 div의 클래스가 active로 변경되어야하며 (활성 상태 인 새 선택 항목이 표시됨) 활성 클래스가있는 이전 div는 클릭 할 수있는 옵션으로 비활성으로 변경되어야합니다. 부적절하기 때문에 CSS 코드를 삽입하지 않았습니다. 원하는 옵션은 클릭 한 옵션에 따라 클래스를 전환하는 것입니다.

누군가 내 코드를보고이 문제가 어디서 발생했는지 알려주실 수 있습니까? 여기

Answer 1

도 closest 당신이 너무 클릭 요소에서 Active 클래스를 제거하는 가장 가까운 상위 요소를 선택 . 당신이 당신의 핸들러에 상관없이 클릭 된 요소의 클래스 이름으로 실행됩니다 클래스 이름을 변경할 때

$('div.inactive').on('click', function(){ 
    $(this).removeClass('inactive') 
      .addClass('Active') 
      .siblings('div') 
      .removeClass('Active') 
      .addClass('inactive'); 
    }); 
}); 

참고 해당 이벤트 핸들러는 선택한 요소하지 자신의 클래스 이름에 바인딩됩니다. 대신 이벤트 위임을 사용할 수 있습니다.

$('#aParentElement').on('click', '.Active', function(){ 
    // Click handler for the Active element 
}) 

$('#aParentElement').on('click', '.inactive', function(){ 
    // Click handler for the inActive elements 
    $(this).removeClass('inactive') 
      .addClass('Active') 
      .siblings('div') 
      .removeClass('Active') 
      .addClass('inactive'); 
}) 

Answer 2

$(document).ready(function() { 
    $(document).on('click', 'div.inactive', function() { 
     //run some codes 
     $('.Active').removeClass('Active').addClass('inactive'); 
     $(this).removeClass('inactive').addClass('Active'); 
    }); 
}); 

이있다 : 당신은 find 메서드에 전달 된 클래스 이름 . 누락 http://jsfiddle.net/ZgYyP/

Answer 3

WORKING DEMO

다른 답변이 점을 놓친 : 비활성 사업부의 사용자 클릭이, 그 DIV의 클래스가 활성 및 활성 클래스 이전 사업부로 변경해야하는 경우 는 "변경해야 클릭 가능한 옵션 "

당신은 그들이 클래스 이름을 클릭 여부를 할 수 있는지 여부를 제어하려하지만 요소는 div.inactive에 클릭을 결합하는 문제가 있음을 만들기 을 비활성, 해당 클래스가 제거 될 때 해당 바인딩을 삭제하지 않으려면이므로 클릭 할 때마다이를 확인하고 활성 이벤트에도 바인딩해야합니다.

$('div.inactive, div.Active').on('click',function(){ 
    if ($(this).hasClass('inactive')){ 
     //run some codes 
     $(this).siblings().andSelf().toggleClass('Active inactive'); 
    } 
});