Question

我正在开发一个针对marbal工厂的Web应用程序。现在我面临一个问题我有多行记录，用户可以编辑它只是我有五个字段的每个记录的形状输入我想要的用户更改值ajax请求应该触发并根据行id更新数据我已经完成了它，但问题是我必须为不同的输入字段重写整个ajax代码，我想要一些通用的。

这是我的HTML

<div class="l-row" data-value="<?=$row->id; ?>">
                <div class="l-col-md-2">
                  <div class="form-group has-info">
                    <label for="inputInfo1" class="control-label">Item</label>
                   <input type="text" name="item" id="item" value="<?=$row->name?>" class="form-control"  />
                  </div>
              </div>

                <div class="l-col-md-1">
                   <div class="form-group has-info">
                    <label for="inputInfo1" class="control-label">Size</label>
                      <input type="text" name="size" id="size" value="<?=$row->size?>" class="form-control"  />
                  </div>
                </div>

                <div class="l-col-md-1">
                   <div class="form-group has-info">
                    <label for="inputInfo1" class="control-label">Type</label>
                   <input type="text" name="type" id="type" value="<?=$row->type?>" class="form-control"  />
                  </div>
                </div>

                <div class="l-col-md-1">
                   <div class="form-group has-info">
                    <label for="inputInfo1" class="control-label">Thickness</label>
                    <input type="text" name="thickness" id="thickness" value="<?=$row->thickness;?>" class="form-control">
                  </div>
                </div>

                  <div class="l-col-md-1">
                   <div class="form-group has-info">
                    <label for="inputInfo1" class="control-label">Feet</label>
                    <input type="text" name="feet" id="feet" value="<?=$row->feet;?>" class="form-control">
                  </div>
                  </div>

                  <div class="l-col-md-1">
                   <div class="form-group has-info">
                    <label for="inputInfo1" class="control-label">Sale</label>
                    <input type="text" name="sale" readonly="readonly" id="sale" value="<?=$row->sale;?>" class="form-control">
                  </div>
                  </div>
                  <div class="l-col-md-2">
                   <div class="form-group has-info">
                    <label for="inputInfo1" class="control-label">S-Amount</label>
                    <input type="text" name="s_amount" readonly="readonly" id="s_amount" value="<?=$row->s_amount;?>" class="form-control">
                  </div>
                  </div>


                </div>

这是我的jquery脚本

<script type="text/javascript">
 $(document).on('focusout','#item', function() {
  $agents=$(this).closest('.l-row');
  var valu=$agents.attr('data-value');
  var item=$agents.find('#item').val();
  var size=$agents.find('#size').val();
  var type=$agents.find('#type').val();
  var thickness=$agents.find('#thickness').val();
  var feet=$agents.find('#feet').val();
  var sale=$agents.find('#sale').val();
  var s_amount=$agents.find('#s_amount').val();

  alert(item);
  var page_id="<?=$page=basename($_SERVER['PHP_SELF']); ?>";
  $.ajax({
    url: '<?=base_url()?>record_edit',
    type: 'post',
    data: 'id='+valu+'&page_id='+page_id,
    success:function(data)
    {
      //alert(data);
    }
  });   
 });
 </script>

Answer 1

我建议您在此类情景中使用class而不是id，因为无论您使用this获取元素，相同的代码都可以使用。

 $(document).on('focusout','.item', function() { //target with element class .item
  $agents=$(this).closest('.l-row');
  var valu=$agents.attr('data-value');
  var item=$agents.find('.item').val(); //target all input elements with classname
  var size=$agents.find('.size').val();
  var type=$agents.find('.type').val();
  var thickness=$agents.find('.thickness').val();
  var feet=$agents.find('.feet').val();
  var sale=$agents.find('.sale').val();
  var s_amount=$agents.find('.s_amount').val();

  alert(item);
  var page_id="<?=$page=basename($_SERVER['PHP_SELF']); ?>";
  $.ajax({
    url: '<?=base_url()?>record_edit',
    type: 'post',
    data: 'id='+valu+'&page_id='+page_id,
    success:function(data)
    {
      //alert(data);
    }
  });   
});

为每个属性添加一个属性class="whatever you have given to id" 元素

休息每个过程都保持不变。

Answer 2

很简单。您只需使用li { display: table-cell; margin: 0 15px 0 0; border-right-style: dotted; color: blue; border-color: #000000; } ol{ display:table; width: 27em; border: 4px solid black; list-style: none; Padding:10px; text-align:center; } li:last-child { border-right-width: 0; }即可。：）

this

这将为<script type="text/javascript"> $('.l-row input[type="text"]').on('focusout', function() { $agents=$(this).closest('.l-row'); var valu=$agents.attr('data-value'); var item=$(this).val(); // here, this will be the input element that just fired a focusout event. alert(item); var page_id="<?=$page=basename($_SERVER['PHP_SELF']); ?>"; $.ajax({ url: '<?=base_url()?>record_edit', type: 'post', data: 'id='+valu+'&page_id='+page_id, success:function(data) { //alert(data); } }); }); </script> focusout与"type=text"

的所有输入附加div个事件处理程序

如何在jquery中的每个焦点上调用ajax

2 个答案: