제발 생초보를 도와주세요!!

JavaScript
1

반복구문에 관한 질문입니다. 아래의 자바 스크립트를 for문으로 만들려고 하는데 오동작을 합니다.

<원래 코드>
var $selectA1 = $( ‘#income_deduc1’ ),
$selectB1 = $( ‘#class_deduc1’ ),
$options1 = $selectB1.find( ‘option’ );
$selectA1.on( ‘change’, function() {
$selectB1.html( $options1.filter( ‘[class="’ + this.value + ‘"]’ ) );
} ).trigger( ‘change’ );

var $selectA2 = $( ‘#income_deduc2’ ),
$selectB2 = $( ‘#class_deduc2’ ),
$options2 = $selectB2.find( ‘option’ );
$selectA2.on( ‘change’, function() {
$selectB2.html( $options2.filter( ‘[class="’ + this.value + ‘"]’ ) );
} ).trigger( ‘change’ );

var $selectA3 = $( ‘#income_deduc3’ ),
$selectB3 = $( ‘#class_deduc3’ ),
$options3 = $selectB3.find( ‘option’ );
$selectA3.on( ‘change’, function() {
$selectB3.html( $options3.filter( ‘[class="’ + this.value + ‘"]’ ) );
} ).trigger( ‘change’ );

<바꾸려는 코드>
for(i = 1; i <= 3; i = i + 1){
var $selectA = $( ‘#income_deduc’ + i ),
$selectB = $( ‘#class_deduc’ + i ),
$options = $selectB1.find( ‘option’ );
$selectA.on( ‘change’, function() {
$selectB.html( $options.filter( ‘[class="’ + this.value + ‘"]’ ) );
} ).trigger( ‘change’ );
}

2

위의 코드에선 다 실행이 될 것이고, 중간에 변수를 건들지 않는 한 저 상태가 유지되지만, 밑에서 바꾸려는 코드는 $selectA, $selectB, $options가 세 번 바뀌고, 그 때마다 새로 값이 바뀌기 때문에 세 개가 다 적용되지 않고, for문을 완료하고 난 결국엔 마지막 세 번째 것만 적용이 될 것입니다. 이 경우엔, for문을 쓰기 보단 함수를 만들어서 각각의 변수에 적용을 시키는 것이 좋지 않을까 생각해봅니다.

1개의 좋아요
3

달아주신 답변처럼 세번째 것만 적용되고 있습니다.
답변에서 for문대신 함수를 사용하라고 하셨는데요. 그런데 3개가 전부가 아닙니다. 예로서 3개만 적어 놓은 것이고 실제로는 동적으로 생성되기 때문에 함수로 될지 모르겠습니다. 그래서 for문을 사용해야 할 것 같습니다.

4

그러면 배열로 받아두는 것도 나쁘지 않겠네요

const selectors = [];

function eventSelector(number) {
    let $selectA = $(‘#income_deduc’ + number ),
    let $selectB = $(‘#class_deduc’ + number),
    let $options = $selectB1.find( ‘option’ );
    $selectA.on( ‘change’, function() {
        $selectB.html( $options.filter( ‘[class="’ + this.value + ‘"]’ ) );
    } ).trigger( ‘change’ );
    return {
        $selectA, 
        $selectB, 
        $options
    };
}

for (let i = 0; i < 3; i++) {
    selectors.push(eventSelector(i));
}

이러면 굳이 세 개가 아니어도 얼마든지 배열에 담아둘 수 있습니다.

5

아. 답변 정말 감사드립니다.

선생님께서 올려주신 코드는 아주 잘 실행됩니다.
너무 너무 감사합니다.