jQuery通过3个按钮在一个元素上切换多个类

好的，我想让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中？感谢您的帮助。

编辑：删除了我的其他方法，留下了这个方法（我最喜欢的方法；-）

---

编辑：删除了我的其他方法，留下这一种（我最喜欢的方法；-）

---

我建议，尽管未经测试：

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

参考资料：

---

我建议，尽管未经测试：

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

参考资料：

---

我建议使用data-*属性来指定目标类名

<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>

---

演示：

我建议使用data-*属性指定目标类名

<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>

---

演示：

这里有一个简单而干净的解决方案：

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

---

这里有一个简单而干净的解决方案：

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

---

---

如果

#main_content

元素上应该只有一个类，则可以使用

removeClass（）

删除所有类，但不带任何参数，然后添加所需的类。不需要任何检查。或者只需更改属性值，如我的答案所示。这将重置整个属性。@Rorymcrossan谢谢，我不知道我可以将参数留空：）如果

#main_content

元素上只有一个类，您可以使用

removeClass（）

删除所有类，而不带任何参数，然后添加所需的类。不需要任何检查。或者只需更改属性值，如我的答案所示。这将重置整个属性。@Rorymcrossan谢谢，我不知道可以将参数留空：）这感觉比其他解决方案更干净，使父类独立于子类。子类可能甚至不是必需的。我会这样做，但我会使用委托来代替（'code>$（'.group'）。在（'click'，'a'，function（）{…}）上这感觉比其他解决方案更干净，保持父类独立于子类。子类可能甚至不是必需的。我会这样做，但我会使用委托来代替（'code>$（'.group'）。在（'click'，'a'，function（）{…}）上$…变量命名约定时，我将其视为jQuery元素。你的

$class

变量违反了这个约定（并且是全局的），如果你想从链接类中获取新类，

class.replace（'-btn'，''）

会更干净一些。同意$class variable通常当我看到

$…

变量命名约定时，我认为它是一个jQuery元素。您的

$class

变量违反了此约定（并且是全局变量），如果要从链接类中获取新类，

class.replace（'-btn'，''）

会更干净一些。同意$class变量吗