for문 if문 사용으로 반복 줄이는 방법이 궁굼합니다.

4 글 보임 - 1 에서 4 까지 (총 4 중에서)

글쓴이

글
2022년 3월 16일 02:15 #29603

김봉섭
참가자

$($('.intensity-circle')[0]).on('click', function(){
$($('.intensity-circle')[0]).addClass('ic-check')
$($('.intensity-circle')[1]).removeClass('ic-check')
$($('.intensity-circle')[2]).removeClass('ic-check')
$($('.intensity-circle')[3]).removeClass('ic-check')
$($('.intensity-circle')[4]).removeClass('ic-check')
})
$($('.intensity-circle')[1]).on('click', function(){
$($('.intensity-circle')[0]).addClass('ic-check')
$($('.intensity-circle')[1]).addClass('ic-check')
$($('.intensity-circle')[2]).removeClass('ic-check')
$($('.intensity-circle')[3]).removeClass('ic-check')
$($('.intensity-circle')[4]).removeClass('ic-check')
})
$($('.intensity-circle')[2]).on('click', function(){
$($('.intensity-circle')[0]).addClass('ic-check')
$($('.intensity-circle')[1]).addClass('ic-check')
$($('.intensity-circle')[2]).addClass('ic-check')
$($('.intensity-circle')[3]).removeClass('ic-check')
$($('.intensity-circle')[4]).removeClass('ic-check')
})
$($('.intensity-circle')[3]).on('click', function(){
$($('.intensity-circle')[0]).addClass('ic-check')
$($('.intensity-circle')[1]).addClass('ic-check')
$($('.intensity-circle')[2]).addClass('ic-check')
$($('.intensity-circle')[3]).addClass('ic-check')
$($('.intensity-circle')[4]).removeClass('ic-check')
})
$($('.intensity-circle')[4]).on('click', function(){
$($('.intensity-circle')[0]).addClass('ic-check')
$($('.intensity-circle')[1]).addClass('ic-check')
$($('.intensity-circle')[2]).addClass('ic-check')
$($('.intensity-circle')[3]).addClass('ic-check')
$($('.intensity-circle')[4]).addClass('ic-check')
})

이런 식으로 0~4까지 쭉 하드 코딩 했습니다.

단순 [i]로 두고 반복문 사용하면서

i=0 일 때는 [0]에 addClass [1][2][3][4]는 removeClass

i=1 일 때는 [0][1]에 addClass [2][3][4]는 removeClass

이렇게 식을 작성하고 싶은데 어떻게 하면 되나요?

2022년 3월 16일 10:18 #29614

codingapple
키 마스터

이벤트리스너 전체 반복문 돌리고 이벤트리스너 안에서는

$('.intensity-circle').removeClass('~~')

for (let j = 0; j < i + 1, j++){

$($('.intensity-circle')[ j ]).addClass(~~)

}

이래야할듯요

2022년 3월 16일 18:02 #29654

김봉섭
참가자

for (let j = 0; j < i + 1, j++) >> for (let j = 0; j < i + 1; j++)

오타 맞나요?

2022년 3월 16일 18:07 #29655

김봉섭
참가자

$('.intensity-circle').on('click',function(){
$('.intensity-circle').removeClass('ic-check');

})

for (let icCount = 0; icCount < 5; icCount++) {
$($('.intensity-circle')[icCount]).on('click', function(){
for (let j = 0; j <icCount+1; j++){
$($('.intensity-circle')[j]).addClass('ic-check');
}
})
}

이렇게 해결했습니다!

i를 다른 곳에서 전역 함수로 선언을 해버려서 icCount로 반복문 선언했습니다.

이번에 하면서 js에서는 함수 내에서만 지역변수가 선언 되고 함수 밖에서는 모두 전역변수로 선언된다는 것을 알았습니다.!
글쓴이

글

4 글 보임 - 1 에서 4 까지 (총 4 중에서)

답변은 로그인 후 가능합니다.

로그인

for문 if문 사용으로 반복 줄이는 방법이 궁굼합니다.

https://codingapple.com/wp-content/uploads/2019/06/logo2-3.png