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

Choosing the class for the list and setting only one of them

本文关键字：一个 设置 选择 列表      更新时间：2023-09-26

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

这是我的越野车 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 和字体名称

我建议跳过类交换并使用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);
});
您的

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

你还没有给出所有的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); });
相关文章：