[jQuery] 클릭한 요소 텍스트 수정

html

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

 

jQuery

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();
    })
    $("#modify").click(function(){ //수정버튼을 클릭하면 modify함수 실행
        modify();
    })
    $member.on("click","li",function(){
        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>`);
}

function modify(){
    memberName = $memberName.val();
    if($clickItem){ //클릭한 내용이 있을 경우
        $clickItem.text(memberName); //list text를 현재 input 텍스트로 변경
    }else{ //클릭한 내용이 없을 경우
        alert("수정할 이름을 선택하세요");
    }
}