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

[김봉섭]

$($('.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

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

[codingapple]

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

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

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

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

}

이래야할듯요

 

[김봉섭]

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

오타 맞나요?

[김봉섭]

$('.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에서는 함수 내에서만 지역변수가 선언 되고 함수 밖에서는 모두 전역변수로 선언된다는 것을 알았습니다.!

[글쓴이]

글