별 색칠하기

2017. 11. 22. 11:16·DEV/JavaScript

#HTML - fontawsome 이용
<i class="fa fa-star-o fl as" aria-hidden="true" onmouseover="mover(this);" onmouseout="mout(this);" onclick="mclick(this);"></i>
<i class="fa fa-star-o fl as" aria-hidden="true" onmouseover="mover(this);" onmouseout="mout(this);" onclick="mclick(this);"></i>
<i class="fa fa-star-o fl as" aria-hidden="true" onmouseover="mover(this);" onmouseout="mout(this);" onclick="mclick(this);"></i>
<i class="fa fa-star-o fl as" aria-hidden="true" onmouseover="mover(this);" onmouseout="mout(this);" onclick="mclick(this);"></i>
<i class="fa fa-star-o fl as" aria-hidden="true" onmouseover="mover(this);" onmouseout="mout(this);" onclick="mclick(this);"></i>

#JavaScript
	function mover(obj){
		$(obj).prevAll().andSelf().addClass("fa-star");
		$(obj).prevAll().andSelf().removeClass("fa-star-o");
	}
	function mout(obj){
		$(obj).prevAll().andSelf().addClass("fa-star-o");
		$(obj).prevAll().andSelf().removeClass("fa-star");
	}
	function mclick(obj){
		$(".as").attr('onmouseout','');
		$(".as").attr('onmouseover','');
		$(obj).prevAll().andSelf().addClass("fa-star");
		$(obj).prevAll().andSelf().removeClass("fa-star-o");
	
		console.log($(obj).next().attr('class'));
		if($(obj).next().attr('class') == "fa fl as fa-star" || $(obj).next().attr('class') == null){
			$(obj).nextAll().addClass("fa-star-o");
			$(obj).nextAll().removeClass("fa-star");
		}
		var sr = document.getElementById('star_result');
	}


저작자표시 비영리 변경금지 (새창열림)

'DEV > JavaScript' 카테고리의 다른 글

자바스크립트 큰 수 팩토리얼  (0) 2021.08.07
Custom 드롭다운  (0) 2018.07.09
Safari new Date 형 변환시 NaN  (0) 2017.12.13
팝업 자동사이즈 autosize  (0) 2017.10.23
'DEV/JavaScript' 카테고리의 다른 글
  • 자바스크립트 큰 수 팩토리얼
  • Custom 드롭다운
  • Safari new Date 형 변환시 NaN
  • 팝업 자동사이즈 autosize
modric
modric
  • modric
    dev log
    modric
  • 전체
    오늘
    어제
    • 분류 전체보기 (70)
      • DEV (58)
        • Linux (12)
        • JavaScript (5)
        • PHP (4)
        • MySql (4)
        • HTML (7)
        • CSS (9)
        • Spring (13)
        • flutter (1)
        • 오류 (2)
        • devOps (1)
      • 기타 (5)
      • 트렌드 (1)
  • 블로그 메뉴

    • 홈
    • 태그
    • 미디어로그
    • 위치로그
    • 방명록
    • HTML
    • CSS
    • PHP
    • JavaScript
    • Spring
    • Linux
  • 링크

    • 공부하는 소담아빠
    • 타올이
  • 공지사항

  • 인기 글

  • 태그

    컴파일
    팩토리얼
    height
    factorial
    넘침
    Safari
    클릭
    크롬
    linux
    build
    터치
    파란색
    mariadb10
    Destination
    MYSQL
    lastinsertid
    Android
    테두리
    update
    centos7
    제거
    js
    100!
    ios
    centos 7
    mariadb 10
    iframe
    php
    exist
    메타버스
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.5
modric
별 색칠하기
상단으로

티스토리툴바