0

好的，所以我希望用 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 中的变量？帮助表示赞赏..

4

4 回答 4

4

我建议使用 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'));
});

演示：小提琴

于 2013-08-16T13:43:50.123 回答
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/

于 2013-08-16T14:11:44.853 回答
0

我建议，尽管未经测试：

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

参考：

于 2013-08-16T13:41:16.053 回答
0

编辑：删除了我的其他方法，留下了这个（我的最爱。到目前为止;-)

$(".group").on('click', 'a', function(e) {
  e.preventDefault();
  var newClass = $(this).attr('class').replace('-btn','');
  $('#main_content').attr('class', newClass);   
});
于 2013-08-16T13:39:30.003 回答