0

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

这是我的错误 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 有两个类： .text 和字体名称

4

2 回答 2

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 中有一些无法解释的部分似乎超出了您的问题范围，因此为了清楚起见，我省略了这些部分。

于 2013-10-18T08:36:34.947 回答
0

你还没有给出所有的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); });
于 2013-10-18T08:27:27.203 回答