Question

我正在尝试创建一个包含问题字段和答案字段的表单。

问题字段保持不变，点击按钮时，答案字段会增加到设置的最大计数。

当用户同时在这些字段中输入数据时，我想向他们显示他们输入的文本的预览。

我可以为单个字段执行此操作但是答案字段是递增字段，我无法弄清楚如何显示增量字段的预览。

HTML：

<fieldset id="5" style="padding-top:30px;">
  <div>
    <b>Question</b>
    <input type="text" name="word" class="word2" 
      placeholder="Question" style="margin-left:32px; 
      width:150px;"/>
  </div>
</fieldset>


<fieldset id="6">

  <div class="container">
    <div class="row">
      <div class="control-group" id="fields">

        <div class="controls">
          <form role="form" autocomplete="off">
            <b>Choice(s)</b><br /><br />
            <div class="entry input-group col-xs-3">

              <input class="word" name="fields[]" type="text" placeholder="Choice" />
              <span class="input-group-btn">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus"></span>
              </button>
              </span>
            </div>
          </form>
          <br>

        </div>
      </div>
    </div>
  </div>

</fieldset>

<fieldset id="2">
  <div style="padding: 20px;">
    <b><span class="word2_preview"></span></b>
  </div>
</fieldset>

<fieldset id="3">
  <div style="padding:20px;">
    <b><span class="word_preview"></span></b>

  </div>
</fieldset>

JavaScript的：

$(function () {
  $(document).on('click', '.btn-add', function (e) {
    e.preventDefault();

    var controlForm = $('.controls form:first'),
      currentEntry = $(this).parents('.entry:first'),
      newEntry = $(currentEntry.clone()).appendTo(controlForm);

    newEntry.find('input').val('');
    controlForm.find('.entry:not(:last) .btn-add')
      .removeClass('btn-add').addClass('btn-remove')
      .removeClass('btn-success').addClass('btn-danger')
      .html('<span class="glyphicon glyphicon-minus"></span>');
  }).on('click', '.btn-remove', function (e) {
    $(this).parents('.entry:first').remove();

    e.preventDefault();
    return false;
  });
});
</ script >

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/
        libs/jquery/1.3.0/jquery.min.js"></script> <
  script type = "text/javascript" >
  $(function () {
    $(".word").keyup(function () {
      var word = $(this).val();
      $(".word_preview").html(word);
      return false;
    });
  });

</script>

Answer 1

Use jQuery `text()` method

＆＃13;

$(function () {
  $(document).on('click', '.btn-add', function (e) {
    e.preventDefault();

    var controlForm = $('.controls form:first'),
      currentEntry = $(this).parents('.entry:first'),
      newEntry = $(currentEntry.clone()).appendTo(controlForm);

    newEntry.find('input').val('');
    controlForm.find('.entry:not(:last) .btn-add')
      .removeClass('btn-add').addClass('btn-remove')
      .removeClass('btn-success').addClass('btn-danger')
      .html('<span class="glyphicon glyphicon-minus"></span>');
        
  })
  .on('click', '.btn-remove', function (e) {
    $(this).parents('.entry:first').remove();

    e.preventDefault();
    return false;
  });
});

$(function () {
    $(document).on("keyup",".word",function () {
      var word = $(this).val();
      var parent_index = $(this).parent(".entry").index();
      var id = "#word_prev_" + parent_index;
      var elem = document.getElementById(id);

      //if element was created just show the word preview
      if(elem){
        console.log("exists");
        $(elem).text(word);
      }
      //if not create it and show the preview
      else
        {
          console. log("creating");
          $("#word_preview_wrapper > div").append("<b><span id=" + id +">" + word + "</span></b><br/>");
          }
      //return false;
    });
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<fieldset id="5" style="padding-top:30px;">
  <div>
    <b>Question</b>
    <input type="text" name="word" class="word2" 
      placeholder="Question" style="margin-left:32px; 
      width:150px;"/>
  </div>
</fieldset>


<fieldset id="6">

  <div class="container">
    <div class="row">
      <div class="control-group" id="fields">

        <div class="controls">
          <form role="form" autocomplete="off">
            <b>Choice(s)</b><br /><br />
            <div class="entry input-group col-xs-3">

              <input class="word" name="fields[]" type="text" placeholder="Choice" />
              <span class="input-group-btn">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus"></span>
              </button>
              </span>
            </div>
          </form>
          <br>

        </div>
      </div>
    </div>
  </div>

</fieldset>

<fieldset id="word_preview_wrapper">
  <div style="padding:20px;">
  </div>
</fieldset>

＆＃13;

像这样我猜

Answer 2

将密钥更改事件更改为

$(".word").bind('keyup',function () {
     addText();
     return false;
});

将addText函数添加为下面的

function addText(){
     var text = "";
     $('input.word').each(function(i, obj){
        text+=obj.value + "<br>";
        console.log(text);
     });
     $(".word_preview").html(text);
}

还要将波纹管块添加到.btn-add setion

中

$(".word").unbind('keyup').bind('keyup',function () {
       addText();
       return false;
});

全部

预览增量字段

2 个答案: