jQuery

[jQuery] select함수 클릭이벤트

husker1114 2020. 2. 11. 00:57

활용성이 많을거같은 Select 함수를 만들어보았다.

피드백댓글로 써주시면 답변해드리겠습니다. 감사합니다.

 

<style>

.select{ background-color: gray; }//선택된 item을 구분하기위해서 백그라운드 사용

</style>

 

<script src="http://code.jquery.com/jquery-1.10.2.js">
<script type="text/javascript">

버튼 클릭 이벤트 함수

$('TagName#id').on('click', 'S_TagName', function(event) {//TagName#id안에있는 S_TagName들을 선택할수있는 함수. 

               //on을 사용하지않는다면 클릭했을떄 TagName즉 부모태그만 클릭이 되기때문에 on을 실행시켜준다. 
    select($(event.target)); //선택된 event.target을 매게변수로 보내줘서 select함수실행
    if (selectitem != null) {//선택이 됐다면 count 변수를 1로 바꿔서 insert가 선택된 div아래에 추가될수있도록 한다.
        count = 1;
    }
}); 

(주석 지운 소스)

$('div#write').on('click', 'div', function(event) {
    select($(event.target));
    if (selectitem != null) {
        count = 1;
    }
});

 

SELECT함수

function select(item) {//함수가 실행되면 먼저 이미selectitem에 있는 타겟의 select클래스를 삭제해주고 선택된item의 태그에 select태그를 추가해준다.
    $(selectitem).removeClass('select');
    selectitem = $(item);
    $(selectitem).addClass('select');
}

(주석 지운 소스)

function select(item) {
    $(selectitem).removeClass('select'); 
    selectitem = $(item); 
    $(selectitem).addClass('select'); 
}

</script>