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())); 
}); 

Предполагается, что новый класс для добавления - это текст элемента, а не имя класса элемента, который нажат, что не ясно из вашего вопроса, но если вы предпочли бы, чтобы класс элемента с щелчком стал класс #main_content, то я бы предложил т, вместо этого, следующие:

$('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/