[jQuery]선택한 리스트에 클래스 추가

html

<div>
    <input type="text" id="memberName" />
    <button id="add">
        추가
    </button>
</div>
<ul class="member">
</ul>

 

js

var $member=null;
var $memberName=null;
var $clickItem=null;
$(document).ready(function(){
    init();
    initEvent();
})

function init(){
    $member=$(".member");
    $memberName=$("#memberName");
}

function initEvent(){
    $("#add").click(function(){
        add();
    })
    $member.on("click","li",function(){ //생성된 li를 클릭하기 때문에 on메서드 사용
        addClass($(this));
    })
}

function addClass($item){
    if($clickItem!=null){
        $clickItem.removeClass("on");
    }
    $clickItem=$item;
    $clickItem.addClass("on");
}


function add(){
    memberName = $memberName.val();
    $member.append(`<li>${memberName}</li>`);
}

 

실행결과