Javascript 为列表选择类并仅设置其中一个

我想用从列表中选择的字体名称设置一个类。 当用户选择不同字体时，将删除现有类并设置新类

这是我的童车：

$(document).on('click', '.fonts-container ul li', function(){ 
   if ( $('.font2').hasClass("active")) {
    var fontName = $(this).data("fontname");
    $(this).closest(".editor").find('.text').toggleClass(fontName);
    }
   }
});

名单如下：

<ul >
  <li  data-fontname="Aclonica">Aclonica</li>
  <li  data-fontname="Acme">Acme</li>
  <li  data-fontname="Alegreya">Alegreya</li>
</ul>

Aclonica
Acme
Alegreya

---

因此，在结果元素中，text有两个类：。text和字体名

您没有给出所有html片段。下面是一个模拟演示：

---

我建议跳过类交换，并使用jQuery设置内联字体族样式属性。使用

data fontname

属性指定有效的字体名称而不是类名，并直接设置它们。这样一来，

font-family

规则将被简单地覆盖，因此您不需要先取消设置上一个值

另外，在包含列表的

ul

元素上插入

data target

属性，使列表对标记更改的敏感性降低

<ul data-target=".editor1">
  <li data-fontname="Aclonica">Aclonica</li>
  <li data-fontname="Acme">Acme</li>
  <li data-fontname="Alegreya">Alegreya</li>
</ul>

$('.fonts-container > ul > li').on('click', function(){
  var $el = $(this);
  var fontName = $el.data('fontname');
  var $target = $($($el.parent()).data('target'));
  $target.css('font-family', fontName);
});

Aclonica
Acme
Alegreya

$（'.fonts container>ul>li'）。在（'click'，function（）上{
var$el=$（本）；
var fontName=$el.data（'fontName'）；
var$target=$（$（$el.parent（））.data（'target'）；
$target.css（'font-family'，fontName）；
});

---

您的JS中有一些无法解释的部分似乎超出了您的问题范围，因此为了清晰起见，我省略了这些部分。

但是现在.text有所有3种字体，我应该总是只有一种。@lipenco为什么不做个小动作，这是一种更好更快的解决问题的方法。我们可以将最后添加的类作为数据属性记住。见修改后的：

<ul data-target=".editor1">
  <li data-fontname="Aclonica">Aclonica</li>
  <li data-fontname="Acme">Acme</li>
  <li data-fontname="Alegreya">Alegreya</li>
</ul>

$('.fonts-container > ul > li').on('click', function(){
  var $el = $(this);
  var fontName = $el.data('fontname');
  var $target = $($($el.parent()).data('target'));
  $target.css('font-family', fontName);
});