Question

我的问题here的完整工作JSFiddle。

我的表单有多个子表单：

<div class="container-fluid">
  <form>
  <ul style="list-style-type: none">
    <li class="panel panel-body panel-default">
      <div class="form-group">
        <label clas="control-label" for="1_sample">Sample</label>
        <input type="number" id="1_sample" name="1_sample" class="form-control">
      </div>
      <div class="progress">
            <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                <span class="sr-only">100% Complete</span>
            </div>
        </div>
      <div class="form-group">
        <label clas="control-label" for="1_result">Result</label>
        <input type="number" id="1_result" name="1_result" class="form-control">
      </div>
      <div class="form-group">
        <label clas="control-label" for="1_number">Number</label>
        <input type="number" id="1_number" name="1_number" class="form-control">
      </div>
    </li>
        <li class="panel panel-body panel-default">
      <div class="form-group">
        <label clas="control-label" for="2_sample">Sample</label>
        <input type="number" id="2_sample" name="2_sample" class="form-control">
      </div>
      <div class="progress">
            <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                <span class="sr-only">100% Complete</span>
            </div>
        </div>
      <div class="form-group">
        <label clas="control-label" for="2_result">Result</label>
        <input type="number" id="2_result" name="2_result" class="form-control">
      </div>
      <div class="form-group">
        <label clas="control-label" for="2_number">Number</label>
        <input type="number" id="2_number" name="2_number" class="form-control">
      </div>
    </li>
  </ul>
  </form>
</div>

编码行为是当sample输入发生变化时，同一result中的number和li输入会一起变化。

我的JQuery目前看起来像：

$(document).ready(function() {
    var form = $('form');
    form.on('change', 'input[id$="sample"]', function (e) {
            var sample_field = e.target;
            var result_field = $(sample_field).closest('.form-group').next().next().find("input[id$='result']");
            var number_field = $(sample_field).closest('.form-group').next().next().next().find("input[id$='number']");

            var sample = $(sample_field).val();

            $(result_field).val(sample);
            $(number_field).val(sample);
    });
});

我想知道是否有办法避免next()链接以获得正确的表单组？在实际代码中，next()链非常长，并且对于元素的追加或删除也不是很强大。

find()本身似乎没有探索输入的.form-group元素 - 是否有更好的方法来编写此功能？

更新

JSFiddle代码已更新，以反映已接受的答案here。

Answer 1

如果要保持表单输入结构相同，则表示ID的命名结构遵循特定模式：

1_sample, 1_result, 1_number 
2_sample, 2_result, 2_number 
3_sample, 3_result, 3_number  
...

然后有一个更优雅的解决方案，您可以直接定位输入字段的ID。请考虑对您的代码进行以下更新：

$(document).ready(function() {
    var form = $('form');
    form.on('change', 'input[id$="sample"]', function (e) {
            //Get number prepended to id
            var formGroupIdx = $(this).attr('id').split("_")[0]; 

            //Get specific inputs using a concatenation of the prepended 
            //index and the default description of the input
            var result_field = $('#'+formGroupIdx+'_'+'result');
            var number_field = $('#'+formGroupIdx+'_'+'number');

            var value = $(this).val();
            result_field.val(value);
            number_field.val(value);
    });
});

对于以“sample”结尾的给定输入，它将首先获取该假装数字（1,2,3 ...）。然后它将使用该索引值直接获得相应的结果和数字输入。最后，它将值设置为等于当前样本输入。

更新了 jsfiddle

Answer 2

您可以使用 $（'form'）选择元素.find（）如下所示，以避免next（）链接

$(document).ready(function() {
  var form = $('form');
  form.on('change', 'input[id$="sample"]', function (e) {
    var sample_field = e.target;
    var result_field = $('form').find("div.form-group > input[id$='result']");
    var number_field = $('form').find("div.form-group > input[id$='number']");
    var sample = $(sample_field).val();

    $(result_field).val(sample);
    $(number_field).val(sample);
  });
});

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <form>
    <ul style="list-style-type: none">
      <li class="panel panel-body panel-default">
        <div class="form-group">
          <label clas="control-label" for="1_sample">Sample</label>
          <input type="number" id="1_sample" name="1_sample" class="form-control">
        </div>
        <div class="progress">
          <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
            <span class="sr-only">100% Complete</span>
          </div>
        </div>
        <div class="form-group">
          <label clas="control-label" for="1_result">Result</label>
          <input type="number" id="1_result" name="1_result" class="form-control">
        </div>
        <div class="form-group">
          <label clas="control-label" for="1_number">Number</label>
          <input type="number" id="1_number" name="1_number" class="form-control">
        </div>
      </li>
    </ul>
  </form>
</div>

这是jsfiddle：https://jsfiddle.net/v5mhu02n/3/

JQuery如何避免next（）方法链接

2 个答案: