Question

对于AJAX后期方法（总共30个输入），我认为可以更容易地将变量绑定到以后的PHP处理中。但我认为可以这样做的方式，效果不好......

我的javascript代码：

for (i = 1; i < 10; i++) {
    var fieldname+i = $('#f' + i + 'name').val();
    var fieldspecify+i = $('#f' + i + 'specify').val();
    var fieldwidth+i = $('#f' + i + 'width').val();

        var data = {
            fieldname+i: fieldname+i,
            fieldspecify+i: fieldspecify+i,
            fieldwidth+i: fieldwidth+i
        };
}

我在html中的代码：

<?php for($i = 1; $i < 10; $i++) { ?>
<div style="margin-top:25px;" class="row">
    <div class="col-md-5">
        <label for="f<?= $i; ?>name">Veld <?= $i; ?>: Wat is de vraag van het veld?</label>
        <input type="text" class="form-control" id="f<?= $i; ?>name"
               placeholder="Bijv. Wat is 1 + 2?"/>
    </div>
    <div class="col-md-4">
        <label for="f<?= $i; ?>specify">Veld <?= $i; ?>: Soort veld</label>
        <select class="form-control" id="f<?= $i; ?>specify">
            <option disabled selected>Selecteer..</option>
            <option value="0">Tekst-input</option>
            <option value="1">Selecteer-input</option>
            <option value="2">Textarea-input</option>
        </select>
    </div>
    <div class="col-md-3">
        <label for="f<?= $i; ?>width">Veld <?= $i; ?>: Breedte</label>
        <select class="form-control" id="f<?= $i; ?>width">
            <option disabled selected>Selecteer..</option>
            <option value="0">25%</option>
            <option value="1">50%</option>
            <option value="2">75%</option>
            <option value="3">100%</option>
        </select>
    </div>
</div>

我的问题是：以什么方式绑定变量的方式比键入30行更容易。

Answer 1

不要使用计数变量名，即名称中带有运行索引的变量。这总是错误的（除了在代码中语法无效）。

如果你有更多相同类型的东西，请使用数组。

var fields = [], i;

for (i = 1; i < 10; i++) {
    fields.push({
        name: $('#f' + i + 'name').val(),
        specify: $('#f' + i + 'specify').val(),
        width: $('#f' + i + 'width').val()
    });
}

Answer 2

使用类而不是唯一ID。然后你可以使用map()循环遍历它们以返回一个对象，该对象包含相关的键/值对，您可以通过遍历DOM来查找与当前行相关的元素，如下所示

var data = $('.row').map(function() {
  var $row = $(this);
  return {
    fname: $row.find('.fname').val(),
    fspecify: $row.find('.fspecify').val(),
    fwidth: $row.find('.fwidth').val(),
  }
}).get();

console.log(data);

.row {
  margin-top: 25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-5">
    <label>Veld 1: Wat is de vraag van het veld?
        <input type="text" class="form-control fname" placeholder="Bijv. Wat is 1 + 2?"/>
    </label>
  </div>
  <div class="col-md-4">
    <label>Veld 1: Soort veld
      <select class="form-control fspecify">
        <option disabled selected>Selecteer..</option>
        <option value="0">Tekst-input</option>
        <option value="1">Selecteer-input</option>
        <option value="2">Textarea-input</option>
      </select>
    </label>
  </div>
  <div class="col-md-3">
    <label>Veld 1: Breedte
      <select class="form-control fwidth">
        <option disabled selected>Selecteer..</option>
        <option value="0">25%</option>
        <option value="1">50%</option>
        <option value="2">75%</option>
        <option value="3">100%</option>
      </select>
    </label>
  </div>
</div>

<div class="row">
  <div class="col-md-5">
    <label>Veld 2: Wat is de vraag van het veld?
        <input type="text" class="form-control fname" placeholder="Bijv. Wat is 1 + 2?"/>
    </label>
  </div>
  <div class="col-md-4">
    <label>Veld 2: Soort veld
      <select class="form-control fspecify">
        <option disabled selected>Selecteer..</option>
        <option value="0">Tekst-input</option>
        <option value="1">Selecteer-input</option>
        <option value="2">Textarea-input</option>
      </select>
    </label>
  </div>
  <div class="col-md-3">
    <label>Veld 2: Breedte
      <select class="form-control fwidth">
        <option disabled selected>Selecteer..</option>
        <option value="0">25%</option>
        <option value="1">50%</option>
        <option value="2">75%</option>
        <option value="3">100%</option>
      </select>
    </label>
  </div>
</div>

注意这里只有2行，但这种模式无限可行。

Answer 3

你可以简单地使用：

const els = document.getElementById("formId").elements;

这将遍历表单中的所有字段/元素。因此，使用它，您可以将结果推送到对象中，或者根据自己的喜好进行操作。

这是该方法的基础，但您可以轻松地根据您的需求进行调整。检查控制台以查看输出。

示例

https://jsfiddle.net/9d2szx3k/

<强> HTML

<form id="formId"> <input type="text" value="Name" /> <input type="password" value="Password" /> <input type="tel" value="07888888888" /> <select> <option value="Option 1">Option 1</option> <option value="Option 2">Option 2</option> <option value="Option 3" selected="selected">Option 3</option> </select> </form>

<强>的JavaScript

const els = document.getElementById("formId").elements; console.log(els); Array.from(els).forEach(el => { console.log(el.value); });

Javascript动态变量名（在AJAX中）

3 个答案: