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

我建议使用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>

然后

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

演示：Fiddle

Answer 2

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

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

Answer 3

编辑：删除了我的其他方法，留下了这个（我的收藏到目前为止; - ）

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

Answer 4

我建议，尽管未经测试：

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

参考文献：

jQuery从3个按钮切换一个元素上的多个类

4 个答案: