jQuery는 3 개의 버튼에서 하나의 요소에 대해 여러 클래스를 토글합니다.

Question

좋아, 그래서 하나의 요소에 대한 클래스를 3 개의 다른 버튼으로 제어하려고합니다. 하지만 한 번에 하나의 클래스 만 사용할 수 있으므로 사용되지 않는 두 클래스를 제거해야합니다.

버튼 :

<ul class="group"> 
<li> <a href="#" class="small-btn">Small</a> </li> 
<li> <a href="#" class="med-btn">Medium</a> </li> 
<li> <a href="#" class="large-btn">Large</a> </li> 
</ul> 

내 콘텐츠 래퍼 :

<div id="main_content" class="large"> 
content here 
</div> 

나는 꽤 나는 두 개의 다른 클래스에 대해 확인하고이를 제거 할 방법을 내 머리에서 작동하지 않을 수 있습니까? jQuery에서 클래스를 변수로 저장하는 방법이 있습니까? 도움말 감사합니다 ..

Answer 1

나는 데이터 -를 사용하는 것이 좋습니다 * 대상 클래스 이름 다음

<ul class="group"> 
<li> <a href="#" class="small-btn" data-class="small">Small</a> </li> 
<li> <a href="#" class="med-btn" data-class="medium">Medium</a> </li> 
<li> <a href="#" class="large-btn" data-class="large">Large</a> </li> 
</ul> 

을 지정하는 속성 것

$('ul.group a').click(function(e){ 
    e.preventDefault(); 
    $('#main_content').attr('class', $(this).data('class')); 
}); 

데모 : 여기 Fiddle

Answer 2

이 편집 :.이 하나 (내 즐겨 찾기를 떠나, 내 다른 접근 방식을 제거 지금까지 ;-)

$(".group").on('click', 'a', function(e) { 
    e.preventDefault(); 
    var newClass = $(this).attr('class').replace('-btn',''); 
    $('#main_content').attr('class', newClass); 
}); 

Answer 3

내가 좋을 것, 검증되지 않은이기는 :

$('ul.group a').click(function(e){ 
    e.preventDefault(); 
    var $self = $(this); 
    $('#main_content').attr('class', $.trim($self.text().toLowerCase())); 
}); 

이것은 추가 할 새 클래스가 클릭 한 요소의 class-name이 아니라 요소의 텍스트 인 것으로 가정합니다. 이는 질문에서 명확하지 않지만 클릭 된 요소의 클래스가 #main_content의 클래스는 그 다음 sugges 할 것이다 t 대신, 다음

$('ul.group a').click(function(e){ 
    e.preventDefault(); 
    var self = this; 
    $('#main_content').attr('class', self.className); 
}); 

참고 :

• attr().
• click().
• event.preventDefault().
• jQuery.trim().

Answer 4

는 단순하고 깨끗한 솔루션 :

$(document).ready(function() { 
    $("[class$='btn']").click(function() { 
     var $container = $('#main_content'); 
     $container.removeClass(); 

     var cls = $(this).attr('class'); 
     $container.addClass(cls.substring(0, cls.indexOf("-")));  
    }); 
}); 

http://jsfiddle.net/maximua/eudyY/