Question

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

这是我的小车JS：

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

因此在结果元素文本中有两个类：.text和字体名称

Answer 1

我建议使用jQuery跳过类交换并设置内联font-family样式属性。使用data-fontname属性指定有效的字体名称而不是类名，并直接设置它们。这样就可以简单地覆盖font-family规则，因此您无需先取消先前的值。

此外，在包含列表的data-target元素上插入ul属性，以使列表对标记更改的敏感度降低。

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

你的JS中有无法解释的部分似乎超出了你的问题范围，所以为了清楚起见，我省略了这些部分。

Answer 2

你还没有给出所有的html片段。这是一个模拟演示：http://jsfiddle.net/m2rHL/

$(document).on('click', '.fonts-container ul li', function(){ 
    var fontName = $(this).data("fontname");
    //alert(fontName + " " + $(".editor").find('.text').length);
    $(".editor").find('.text').addClass(fontName); });

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

2 个答案: