'동적클래스 인식'에 해당되는 글 1건

  1. 2018.08.07 값 입력할때마다 더하기
2018. 8. 7. 17:05

jQuery에서 필드를 추가해서, 입력할때마다 전체값을 더해서 보여주고 싶었다.


예로, 노래 CD 디스크 입력 필드를 새로 만들고, 키을 입력할때마다, each로 돌면서 각각의 값들을 더한거를 보여주고 싶을때



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
        //트랙수 키 입력시
 
        $('.track').on('keyup',function(e){
 
            var Sum = 0;
 
            //.trackNo 클래스 돌면서 계산
 
           $('.tracksNo').each(function(idx,ele){
 
               //입력값 있는거만
 
               if(!isNaN(this.value)&&this.value.length!=0){
 
                   Sum+=parseInt($(ele).val());
 
                   $('#total').val(Sum);
 
               }
 
           });
 
        });
cs


isNaN은 아직 값을 입력 안한것들은 계산하면 안되어서, if문으로 값 입력된거만 넣어서 sum에 계산함.



 if(!isNaN(this.value)&&this.value.length!=0)

이게 입력값 체크 할때 생각보다 유용하다.


그리고, 여러값들을 더할때는 클래스로 지정하고, .each로 돌리면 됨.


아, parseInt 또는 parseFloat 해서 숫자 인식하게 해줘야한다.


아니면, String으로 인식해서, 문자열만 합쳐진다.




참고 사이트

http://blog.naver.com/PostView.nhn?blogId=caesar0342&logNo=20119941095

http://madebykaus.com/?p=382







Posted by Tyson