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

<强> Demo fiddle

当时为一个li元素设置类“active”

1 个答案: