Question

我正在尝试将表单的输入值显示到相应的div / p标记中。因此，每当用户开始输入输入字段时，该值将被写入输入框以及页面上的p标记中。

我让我的jQuery查看每个单独的表单字段并将该信息显示给指定的p标记。有没有办法编写这段代码，所以我不必为每个表单字段创建多行代码？

现在写，它正在检查表单中是否有更改，然后查看该字段是否有值，如果是，则显示p标记中的信息，否则会使p标记为空。

他就是我现在所做的。

＆＃13;

$('#webform-client-form-1').on('change',function(e){
  /* Distributor Name INPUT   */
  var distributorNameInput=$('#edit-submitted-distributor-name').val();
      if( !$("#edit-submitted-distributor-name").val() ) {
       $(".distributor-name p").html("");
    } else {
       $(".distributor-name p").html("<strong>Distributor Name</strong> <br/>" + distributorNameInput);
    };
/* Year INPUT   */
    var YearInput=$('#edit-submitted-year').val();
    if( !$("#edit-submitted-year").val() ) {
        $(".year p").html("");
    }else {
        $(".year p").html("<strong>Year</strong> <br/>" + YearInput);
    };
    /* General Information INPUT   */
    var generalinfoInput=$('#edit-submitted-general-information').val();
    if( !$("#edit-submitted-general-information").val() ) {
        $(".general-info").html("");
    }else{
       $(".general-info").html("<h2>General Information</h2> <p>" + generalinfoInput + "</p>");
    };
});

＆＃13;

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
 <form enctype="multipart/form-data" action="/" method="post" id="webform-client-form-1" accept-charset="UTF-8">
  <p>
   <label>Distributor Name*</label>
   <input type="text" id="edit-submitted-distributor-name" name="submitted[distributor_name]" value=" " size="60" maxlength="128" class="form-text required">
 </p>
 <p>
  <label for="edit-submitted-year">Year*</label>
  <select id="edit-submitted-year" name="submitted[year]" class="form-select">
    <option value="2015" selected="selected">2015</option>
    <option value="2016">2016</option>
  </select>
</p>
</form>
<div class="preview" id="preview">
  <div class="distInfo">
    <div class="distributor-name">
      <p><strong>Distributor Name</strong> <br>Text will go here</p>
    </div>
    <div class="year">
      <p><strong>Year</strong> <br>2015</p>
    </div>
  </div>
</div>

＆＃13;

Answer 1

您可以使用类和数据属性来传递输入目标元素，而不是使用ID：

$(document).ready(function() {
  $(document).on('change input paste', '.input', function() {
    $($(this).data('target')).text($(this).val());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="input" data-target="#text-input" />
<select class="input" data-target="#select-input">
  <option value=""></option>
  <option value="A">A</option>
  <option value="B">B</option>
</select>

<hr/>
<div id="text-input"></div>
<div id="select-input"></div>

Answer 2

你可能意味着内联如果

/* Distributor Name INPUT   */
var distributorNameInput = $('#edit-submitted-distributor-name').val();
$(".distributor-name p").html( distributorNameInput ? "<strong>Distributor Name</strong> <br/>" + distributorNameInput : "");

/* Year INPUT   */
var YearInput = $("#edit-submitted-general-information").val();
$(".year p").html( YearInput ? "<strong>Year</strong> <br/>" + YearInput: "");

/* General Information INPUT   */
var generalinfoInput = $('#edit-submitted-general-information').val();
$(".general-info").html( generalinfoInput ? "<h2>General Information</h2> <p>" + generalinfoInput : "");

内联if的语法是

condition ? true code: false code

Answer 3

您可以创建一个对象数组并对其进行迭代。如果您正在考虑添加新元素，这很好，因为您只需要将它们添加到数组中。

$('#webform-client-form-1').on('change',function(e){
    var elements=new Array(
    {valueToCheck:'edit-submitted-distributor-name',className:'distributor-name', label: 'Distributor Name'},
    {valueToCheck:'edit-submitted-year',className:'distributor-name', label: 'Distributor Name'},
    {valueToCheck:'edit-submitted-distributor-name',className:'distributor-name', label: 'Distributor Name'},
    );
    //check'em
    elements.forEach(function(element){
        var myValue=$("#"+element.valueToCheck).val();
        $("."+element.className+" p").html( myValue ? "<strong>"+element.label+"</strong> <br/>" + myValue: "");
    });
}

有没有办法将其简化为只有几行jQuery

3 个答案: