[노가다 후기] input 체크시 원하는 텍스트 출력 / input 입력 시 텍스트 출력

#click #is:checked #append

 

안녕하세요 Gi_1입니다.

 

오늘은 일기식으로 글을 남겨보려고 합니다. 제가 힘들때 노력했던.. 스크립트를 더 열심히 공부해야겠다고 마음을 먹었던 계기였어요.

 

input 체크시 원하는 텍스트를 출력하는 방법을 알아보려합니다.

input 체크 시 value를 출력하는 간단한 방법이 인터넷에 많이 나타나 있지만, value는 백앤드에서 넘어오는 값으로 되어 있었는데.. 랜덤으로 숫자와문자를 합친 형태였습니다. 619886a13d51db1799238aad 이렇게요,

input type도 백앤드에서, value는 619886a13d51db1799238aad 과 같은 코드로 되어 있는 상황이였습니다.

 

pug로 퍼블리싱 진행 하였고 개발은 node.js로 하였습니다.

 

 

코드 일부분 드리자면,

each detail in estimate_item.details

                    div.frm_request_ss(class=detail.input_name)

                      input.first_input(type=detail.input_type, id=detail._id, class='_' + detail._id, name=detail.input_name, value=detail._id)

                      label(for=detail._id) #{detail.name}

                      //- Some text input

                      if (detail.text===true)

                        input(type="hidden", name='item', value=estimate_item._id)

                        input(type="hidden", name='detail', value=detail._id)

                        input.frm_input.toggle_input(type="text", name="text", value="", id='txt-' + detail._id, class='txt-' + detail._id)

 

 

이렇게 되어 있었습니다.

 

그 당시에 저에게는 정말 멘붕이였고.. 

이와 관련해서 회사 내에서 도움을 청해봤지만... 제가 다니던 회사는.......

그렇다고 업체에 안된다고 할 수도 없는 일이였죠. 그저 미리보기인데 구현이 불가능하다니..

 

그래서 저는 백앤드의 _id값으로 클래스를 부여한 후, 모든 경우의 수에 수기로 script를 작성하기로 했습니다.

 

 

 

Checkbox

  <ul>

    <li>

      <input type="checkbox" class="test01"> test01

    </li>

    <li>

      <input type="checkbox" class="test02"> test02

    </li>

    <li>

      <input type="checkbox" class="test03"> test03

    </li>

  </ul>

  <div class="channel_txt">

  </div>

 

 <script>

   

  $(".test01").click(function(){

    if ($(".test01" ).is( ":checked")){

      $(".channel_txt").append("<span class='f2_1'>test01</span>");

    } else {

      $(".f2_1").remove();

    }

  });

  $(".test02").click(function(){

    if ($(".test02" ).is( ":checked")){

      $(".channel_txt").append("<span class='f2_2'>test02</span>");

    } else {

      $(".f2_2").remove();

    }

  });

  $(".test03").click(function(){

    if ($(".test03" ).is( ":checked")){

      $(".channel_txt").append("<span class='f2_3'>test03</span>");

    } else {

      $(".f2_3").remove();

    }

  });

 </script>

 

 

 

 

Text

 

  <ul>

    <li>

      <input type="text" class="test04">

    </li>

  </ul>

  <p class="f4_24">

  </p>

 

 <script>

   

$(document).ready(function(){

// 입력란에 입력을 하면 입력내용에 내용이 출력

// 1. #data 공간에서 keyup이라는 이벤트가 발생했을 때

$(".test04").keyup(function(){

  // 2. #out 공간에 #data의 내용이 출력된다.

  $(".f4_24").text($(".test04").val());

  // #out의 위치에 text로 데이터를 받는다.(setter)

  // 들어가는 데이터는 #data의 값(.val())이다. (getter)

  // 메서드 괄호 안에 아무것도 없으면 getter, 파라미터가 있으면 setter이다.

});

});

 </script>

 

Radio 클릭시 input 생성 / 텍스트반환

<ul>

  <li>

    <input type="radio" id="aa01" class="aa01" name="radioTest">

    <input type="text" style="display:none" class="aa01_text">

  </li>

  <li>

    <input type="radio" id="aa02" class="aa02" name="radioTest">

    <input type="text" style="display:none" class="aa02_text">

  </li>

</ul>

<p></p>

<script>

$(".aa01").click(function(){

  $(".aa01_text").css("display","inline-block");

  $(".aa02_text").css("display", "none");

  $(".aa02_text").val("");

});

$(".aa02").click(function(){

  $(".aa02_text").css("display","inline-block");

  $(".aa01_text").css("display", "none");

  $(".aa01_text").val("");

});

 

 

 

</script>

 

 

 

 

더 간단하게 코드를 치고 싶었지만, 아직도 어떻게 하면 더욱 간단하게 저 코드를 클린코드로 만들 수 있을지는 모르겠습니다. value를 가져올 수 있으면 좋았을탠데 말이죠.

 

 

예제처럼 숫자만 증가하는 것이 아닌, 텍스트가 모두 달랐습니다..

 

백앤드 개발자에게 이와 관련해서 얘기를 나눠봤지만, 그 때 당시 백앤드 개발자분은 구현할 수 없다고 미리보기 기능을 빼자고 하셨던게 기억나네요.

 

어째뜬 업체에서 요청한 사항이니 저는 노가다로서라도 미리보기를 구현해야 했고 결국 제이쿼리를 800줄을 쳤던 기억이 나네요..

 

 

 

피드백도 감사히 받도록 하겠구요!

 

혹시 도움이 되시는 분들은 복사하셔서 사용하시면 될거같습니다.

 

읽어주셔서 감사합니다.