괴발개발/Javascript+JQuery

JQ_질문등록창(+서브질문등록)

moonday 2021. 6. 24. 22:28 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>질문창추가하는 예제</title>
  <script src="../JS/jquery.min.js"></script>
  <script>
    mainNum=2;
    $(function(){
      $('.btn-mainadd').click(function(){
        var addform=  
                      '<div class="QnA">'+
                        '<div id="questionNum">질문'+ mainNum++ +'</div>'+
                        '<input type="text" id="question">'+
                      '</div>';
        $('.QnA-section').append(addform);
      })
    })
  </script>
  <style>
    .QnA-section{position: relative;}
    .btn-mainadd{position: absolute; right: 0; top: 0;}
  </style>
</head>
<body>
  <div class="QnA-section">
    <button class="btn-mainadd">질문추가</button>
    <div class="QnA">
      <div id="questionNum">질문1</div>
      <input type="text" id="question">
    </div>
  </div>
</body>
</html>
더보기

쌤코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>질문창추가하는 예제</title>
  <script src="../JS/jquery.min.js"></script>
  <style>
    .q-box{
      position: relative;}
    #main_add_btn{
      position: absolute;top: 0; right: 0;}
    
  </style>
</head>
<body>
  <div class="q-box">
    <button id="main_add_btn">질문추가</button>
    <div class="q-main-box">
      <div class="main-title">질문1</div>
      <input type="text" class="main-input">
    </div>
  </div>
  <script>
    //방법1
    //var num=2;
    //$(function(){
    //  $('#main_add_btn').click(function(){
    //    var str=
    //      '<div class="q-main-box">'+
    //       '<div class="main-title">질문'+ num++ + '</div>'+
    //       '<input type="text" class="main-input">'+
    //      '</div>';
    //  $('.q-box').append(str);
    // })
    //})
  </script>
  <script>
    //방법2 for복습
    $(function(){
      $('#main_add_btn').click(function(){
        var num = $('.q-main-box').last().children('.main-title').text();
        num= num.substr(2); //부분문자 추출 substr(2)=3번째자리부터끝까지(=앞두글자는필요없음)
        num=parseInt(num); //문자로가져오니까 ++을 하기위해서 숫자로 변환
        var str=
          '<div class="q-main-box">'+
          '<div class="main-title">질문'+ ++num + '</div>'+
          '<input type="text" class="main-input">'+
          '</div>';
      $('.q-box').append(str);
      })
    })
  </script>
</body>
</html>

 

문자와 문자열 자체의 시작숫자는 1이지만,
substr과 index와 같이 문자나 문자열을 다룰 때, 시작 번지가 0번지부터라서 유의
substr(num) => num번째 이후부터 끝까지 잘라낸다
substr(num1,num2) => num1번째 이후(num1+1)부터  num2개를 자름
indexOf('문자1')=> 문자1이 위치한 번지수를 (0번지-첫글자)알려주고 없으면 -1을 반환

이름이아주 더럽게 지어졌다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>질문창추가하는 예제</title>
  <script src="../JS/jquery.min.js"></script>
  <script>
    mainNum=1;
    subNum=1;
    $(function(){
      $('.btn-mainAdd').click(function(){
        var addform=  
            '<div class="question">'+
              '<div class="questionNum">'+ '질문' + ++mainNum +'</div>'+
              '<button class="btn-subAdd">'+'서브질문추가' + '</button>'+
              '<div class="questionbox">'+
                '<input type="text" class="questionMainBox">'+
                '<div class="subbox">'+
                  '<div class="question-SubNum">'+'질문' + mainNum + '-'+ subNum + '</div>'+
                  '<div>'+'<input type="text" class="questionSubBox">'+'</div>'+
                '</div>'+
              '</div>'+  
            '</div>'
        $('.question-section').append(addform);
        $('.btn-subAdd').off('click');
        addEventSubBtnClick($('.btn-subAdd'));
      });
      addEventSubBtnClick($('.btn-subAdd'));
    })

    function addEventSubBtnClick(obj){
    obj.click(function(){
      var questionSubNum=$(this).siblings('.questionbox').find('.question-SubNum').last().text();
      var index = questionSubNum.indexOf('-');
      var num= questionSubNum.substr(index+1);
      num = parseInt(num);
      questionSubNum= questionSubNum.substr(0,index+1);
      var subform=
          '<div class="question-SubNum">'+questionSubNum+ ++num+'</div>'+
          '<div><input type="text" class="questionSubBox">'+'</div>'
      $(this).siblings('.questionbox').find('.subbox').append(subform);
    })
  }
  </script>
  <style>
    .question-section{position: relative;}
    .btn-mainAdd{position: absolute; right: 0; top: 0;}
    .questionNum{float: left; margin-right: 30px;}
  </style>
</head>
<body>
  <div class="question-section">
    <button class="btn-mainAdd">질문추가</button>
    <div class="question">
      <div class="questionNum">질문1</div>
      <button class="btn-subAdd">서브질문추가</button>
      <div class="questionbox">
        <input type="text" class="questionMainBox">
        <div class="subbox">
          <div class="question-SubNum">질문1-2</div>
          <div><input type="text" class="questionSubBox"></div>
        </div>
      </div>  
    </div>
  </div>
</body>
</html>
더보기

쌤코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>질문창추가하는 예제</title>
  <script src="../JS/jquery.min.js"></script>
  <style>
    .q-box, .q-main-box{
      position: relative;}
    .main-add-btn{
      position: absolute;top: 0; right: 0; z-index:2;} /*abs는 클릭안돼*/
    .sub-add-btn{
      position: absolute; top: 40px; right: 0;}
  </style>
</head>
<body>
  <div class="q-box">
    <button class="main-add-btn">메인 질문추가</button>
    <div class="q-main-box">
      <div class="main-title">질문1</div>
      <button class="sub-add-btn">서브 질문추가</button>
      <div class="q-sub-box">
        <div class="sub-title">질문1-1</div>
        <input type="text" class="sub-input">
      </div>
    </div>
  </div>
  <script>
    $(function(){
    /*
    - append, appendTo, prepend, prependTo, after, beforem html 등으로 추가된
    요소에는 기존의 등록한 이벤트들이 적용되지 않을 수 있다
    */
      $('.main-add-btn').click(function(){
        var num = $('.q-main-box').last().find('.main-title').text(); 
        num= num.substr(2);
        num= parseInt(num);
        var str = 
        '<div class="q-main-box">'+
            '<div class="main-title">질문'+ ++num +'</div>'+
            '<button class="sub-add-btn">서브 질문추가</button>'+
            '<div class="q-sub-box">'+
              '<div class="sub-title">질문'+num+'-1</div>'+
              '<input type="text" class="sub-input">'+
            ' </div>'+
        '</div>';
      $('.q-box').append(str);
        //방법1: 새로 추가된 요소에만 이벤트를 추가
        //새로 추가된 서브질문추가 버튼에만 이벤트를 추가
        //addEventSubBtnClick($('.q-main-box').last().find('.sub-add-btn'));
        
        //방법2 : 모든 서브질문 추가 버튼에 이벤트를 제거하고 모든 서브질문추가 버튼에 클릭이벤트를 추가
        $('.sub-add-btn').off('click');
        addEventSubBtnClick($('.sub-add-btn'));
    });
    addEventSubBtnClick($('.sub-add-btn'));
  })
  function addEventSubBtnClick(obj){
    obj.click(function(){
      var mainNum = $(this).siblings('.q-sub-box').last().find('.sub-title').text();
      var index = mainNum.indexOf('-');
      var num= mainNum.substr(index+1);
      num = parseInt(num);
      mainNum= mainNum.substr(0,index+1);
      var str= 
                '<div class="q-sub-box">'+
                  '<div class="sub-title">'+ mainNum + ++num +'</div>'+
                  '<input type="text" class="sub-input">'+
                '</div>'
    $(this).parent().append(str);
    })
  }
  </script>
</body>
</html>
저작자표시

'괴발개발 > Javascript+JQuery' 카테고리의 다른 글

JQ_스크롤( scroll(), scrollTop(),scrollLeft() )  (0) 2021.06.24
JQ_detach()  (0) 2021.06.24
JQ_필터(탐색)  (0) 2021.06.23
JQ_형제 요소 탐색  (0) 2021.06.23
JQ_자손 요소 탐색  (0) 2021.06.23

'괴발개발/Javascript+JQuery'의 다른글

  • 현재글JQ_질문등록창(+서브질문등록)

관련글

댓글

티스토리툴바