javascript - 当时为一个 li 元素设置类“活动”

Question

当只有一个处于活动状态并添加了图标检查时，我正在构建按钮组。

目标是构建字体选择器：

这是我的错误 js 代码

$(document).on('click', '.fonts-size-container ul li', function(){  
    var $el = $(this);
    $('li').removeClass('active');
      $el.addClass('active');
      $el.append('<i class="icon-check"></i>');
});

html:

<ul>
    <li class="no-edit" data-fontsize="8em">8 em</li>
    <li class="no-edit" data-fontsize="7em">7 em</li>
    <li class="no-edit" data-fontsize="6em">6 em</li>
    <li class="no-edit" data-fontsize="5em">5 em</li>
    <li class="no-edit" data-fontsize="4em">4 em</li>
    <li class="no-edit" data-fontsize="3.5em">3,5 em</li>
    <li class="no-edit" data-fontsize="3em">3 em</li>
</ul>

Answer 1

您的代码切换了所有<li>元素的类，我猜您只想影响单击元素的兄弟姐妹，而且我假设您也想删除检查图标。以下代码应该适合您：

$(document).on('click', '.fonts-size-container ul li', function () {
    var $el = $(this);
    $el.siblings().removeClass('active').find('.icon-check').remove();
    $el.addClass('active').append('<i class="icon-check"></i>');
    var fontSize = $el.data('fontsize');
    $(this).closest(".editor").find('.text2').css('font-size', fontSize);
});

演示小提琴