SharedIT | 묻고 답하기(AMP)

jquery 코드 여쭙고 싶습니다.

안녕하세요 초보개발자 입니다.


현재 jquery로 시작시간 또는 종료시간이 00:00일때 alert창 발생하게 작성중입니다.



코드는 아래와 같이 작성하였는데 2번째 그리드 부터 00:00에 알랏창이 발생하지않습니다.
1번쨰 그리드만 alert창이 발생하는데 혹시 코드에 문제가 있을까요?

/구분이 교육일  시작시간 or 종료시간이 선택 또는 00:00이   없도록 alert창 추가


$(document).ready(function() {


    $('#selBox2, #selBox3, #selBox4, #selBox5, #selBox6, #selBox7, #selBox8, #selBox9, #selBox10').on('change', checkEducationTime);

  

    function checkEducationTime() {

      var selBoxValues = Array.from(Array(9), (_, i) => $('#selBox' + (i + 2)).val());

  

      // 교육 시작시간  종료시간 ALERT창   

      if (

        (selBoxValues[2] === 'A7' && (selBoxValues[0] === '00:00' || selBoxValues[4] === '00:00' || selBoxValues[7] === '00:00')) ||

        (selBoxValues[3] === 'A7' && (selBoxValues[0] === '00:00' || selBoxValues[4] === '00:00' || selBoxValues[7] === '00:00')) ||

        (selBoxValues[6] === 'A7' && (selBoxValues[0] === '00:00' || selBoxValues[4] === '00:00' || selBoxValues[7] === '00:00'))

      ) {

        alert('교육 시작시간을 입력해주시길 바랍니다.');

  

        // select 박스  번째 인덱스로 변경

        $('#selBox2, #selBox6, #selBox9').prop('selectedIndex', 0);

      } else if (

        (selBoxValues[2] === 'A7' && selBoxValues[1] === '00:00') ||

        (selBoxValues[3] === 'A7' && selBoxValues[5] === '00:00') ||

        (selBoxValues[6] === 'A7' && selBoxValues[8] === '00:00')

      ) {

        alert('교육 종료시간을 입력해주시길 바랍니다.');

  

        // select 박스  번째 인덱스로 변경

        $('#selBox3, #selBox7, #selBox10').prop('selectedIndex', 0);

      }

    }

  });



많은 관심 부탁드립니다.


감사합니다.

3개의 답변이 있습니다.

minp3
  0 추천 | 10달 전

1. 그리드 추가시에 onchange 이벤트 한번더 걸어주셨는지 확인해보세요.

ready는 최초 document가 로드된 이후 한번만 실행됩니다. 이후 스크립트로 생성되는 사항은 생성스크립트에 onchange 이벤트 다시 맵핑해주어야 합니다.

2. # 선택자는 ID를 선택할때 사용됩니다.

ID는 중복사용불가합니다. name을 선언하시고 name 선택자로 컨트롤 하세요.


wansoo
  0 추천 | 10달 전

빨간신발님 의견처럼,

checkEducationTime() 함수 안에서

if 문 들어 가기 전에 selBoxValues 배열 값들을 출력해 보면서 비교해 보면서 원인을 찾아 보는게 좋을 것 같네요.


첫번째 그리드가 들어 갈때는 어떤 값이고, 두번째 그리드가 들어 갈때는 어떤 값인지를 alert 문이나 debug문 등을 이용해서 출력해 보면서 비교해 본다면 원인을 찾을 수 있을 걸로 보이네요.


저 상황에서 굳이 === 을 사용해서 비교할 필요가 있을까 하는 생각도 드는데요.

=== 보다는 ==을 사용해서 비교하는게 낫지 않을까 하는 생각도 드네요.




빨간신발
  0 추천 | 10달 전

if문 앞단에 console.debug를 사용해서 변경되는 값을 확인해보세요. if문에 들어가는 변수들의 값을 모두 출력해서 원하는대로 변하고 있는지 확인하시면 됩니다.

크롬에서 f12를 눌러 개발자모드에서 확인이 가능합니다.