jQuery .css()의 중복 사용

프론트엔드 스쿨 modal 로그인 화면 구현 과제 중 input tag에 값이 입력이 되지 않은 상태로 로그인 버튼이 눌리게 되면 경고 문구와 빨간색 border를 보여야 하는 부분이 있었다.

이 부분을 .css()를 활용해 구현하려 하는데 문제가 발생했다.

  $("#modal-login-btn").click(function () {
    let userID = $("#user-id").val();
    if (userID == "") {
      $(".id-error").show();
      $(".error-line").show();
      $("#user-id").css("border", "2px solid #F4492E");
    } else {
      $(".info-error").show();
    }
  });
  $("#user-id").focus(function () {
    $("#user-id").css("border", "1px solid #C4C4C4");
    $(".id-error").hide();
    $(".error-line").hide();
    $(".info-error").hide();
  });

위의 코드 처럼 login-btn이 클릭되면 상태를 확인하고, 아무런 정보가 입력되지 않은 경우 .css("border", "2px solid #F4492E") 함수를 활용해 border를 빨간색으로 변경하는 것까지는 잘 작동되었다.

 

그런데, 

$("#user-id").focus(function () {
    $("#user-id").css("border", "1px solid #C4C4C4");

user-id에 1px solid #c4c4c4가 적용되지 않고 빨간 border를 그대로 유지하는 문제가 발생했다.

 

jQuery 의 .css() 란?

선택한 요소의 css 속성값을 가져오거나 style 속성을 추가하는 method

사용 방법

1) 속성값 가져오기

$("{ 선택할 요소나 class, id }").css("{선택할 속성}");

2) 속성값 추가하기

$("{ 선택할 요소나 class, id }").css("{선택할 속성:지정하려는 값}");

 

속성값을 추가하는 요소이기 때문에 style.css의 속성이 변경된 것이 아니라, user-id에 inline으로 style 추가돼 우선순위가 더 높은 inline-style이 user-id에 적용된 것이 었고, 중복으로 요소를 추가하는 것은 불가능한 것으로 보였다.

 

그래서 앞서 추가한 요소를 없애는 방법을 생각하고 코드를 수정해봤다.

  $("#modal-login-btn").click(function () {
    let userID = $("#user-id").val();
    if (userID == "") {
      $(".id-error").show();
      $(".error-line").show();
      $("#user-id").css("border", "2px solid #F4492E");
    } else {
      $(".info-error").show();
    }
  });
  $("#user-id").focus(function () {
    $("#user-id").css("border", "");
    $(".id-error").hide();
    $(".error-line").hide();
    $(".info-error").hide();
  });

그 결과, 경고창이 정상적으로 작동하는 것을 확인 할 수 있었다.

 

 

로그인 화면을 구현하며, 앞으로 배울 JavaScript에 대해 예습도 하고 사용하는 함수의 동작을 확실히 알아가게 되었던 것 같다.