시간에 하나의 li 요소에 대해 "active"클래스를 설정하십시오.

Question

하나만 활성화되어 있으며 아이콘이 추가 된 경우 건물 버튼 그룹과 어긋납니다. 여기

이

$(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 내 버그 JS 코드 :

목표는 글꼴 선택기를 구축하는 것입니다

<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