Question

我目前有一个html页面，其中包含以下部分代码：

<td><input type="checkbox" onchange="getButtonDetails(this)" data-toggle="switch" data-title="printing" data-order="{{ $order->order_number }}" class="ct-primary" value="0" /></td>
<td><input type="checkbox" onchange="getButtonDetails(this)" data-toggle="switch" data-title="engraving1" data-order="{{ $order->order_number }}" class="ct-primary" value="0" /></td>
<td><input type="checkbox" onchange="getButtonDetails(this)" data-toggle="switch" data-title="engraving2" data-order="{{ $order->order_number }}" class="ct-primary" value="0" /></td>
<td><input type="checkbox" onchange="getButtonDetails(this)" data-toggle="switch" data-title="assembly" data-order="{{ $order->order_number }}" class="ct-primary" value="0" /></td>
 <td><input type="checkbox" onchange="getButtonDetails(this)" data-toggle="switch" data-title="completed" data-order="{{ $order->order_number }}" class="ct-primary" value="0" /></td>

上面的这个html是针对每个循环的，所以html实际上显示了大约50次具有不同的订单号。

我试图查看某个人何时切换数据切换开关，然后通过ajax将该信息记录到数据库中。我完成此任务的代码（基于新手知识）如下：

function getButtonDetails(elem){
              var $selfSelection = $(elem);

                console.log($selfSelection.data('order'));
                if($selfSelection.val() == '1') {
                  $selfSelection.val('0');
                } else {
                  $selfSelection.val('1');
                };

                $.ajax({
                    type: 'POST',
                    url: 'orders',
                    data: {
                        '_token': $('input[name=_token]').val(),
                        'order_id': $selfSelection.data('order'),
                        'printing': $selfSelection.filter('[data-title="printing"]').val(),
                        'engraving1': $selfSelection.filter('[data-title="engraving1"]').val(),
                        'engraving2': $selfSelection.filter('[data-title="engraving2"]').val()
                    }
                  });
                  toastr.success('Successfully saved', 'Success Alert', {timeOut: 5000});
            };

使用javascript我正在做一个调用函数getButtonDetails的onchnage事件。传递的参数是THIS。因为我假设得到这个输入数据。

在函数中我将var $ selfSelection设置为= $ elem，所以本质上我试图做$ selfSelection =这个当前元素。

我检查控制台日志以确保这确实是我想要的订单。

然后我做一个if else来设置当前所选元素的val。如果用户切换它，它会给它适当的值。这一切都很好。

然而，当我尝试传递数据时，我已经迷失了。我上次失败的尝试是使用过滤器传递数据以选择当前元素的数据标题。这会更新数据库中的一列，但不会全部更新。我需要的是这个：当打开＆＃34;打印＆＃34;它应该在设定的时间获得雕刻1的雕刻，雕刻2等，然后填充这些领域。目前，如果我换了一个似乎不认识任何其他人。

有什么想法吗？我的知识再次低估，所以可以解释任何新手的错误。

Answer 1

我猜是

切换数据切换开关

你的意思是点击一个复选框。我建议不要将函数应用于html级别的每个复选框，而只需将事件监听器绑定到脚本中的那些复选框。

$('.ct-primary').on('change', function() {
  let $row = $(this).parents('tr');

  $.ajax({
    type: 'POST',
    url: 'orders',
    data: {
      '_token': $row.find('input[name=_token]').val(),
      'order_id': $(this).attr('data-order'),
      'printing': $row.find('.printing')[0].checked,
      'engraving1': $row.find('.engraving1')[0].checked,
      'engraving2': $row.find('.engraving2')[0].checked,          
      'assembly': $row.find('.assembly')[0].checked,
      'completed': $row.find('.completed')[0].checked
    }
  });

  toastr.success('Successfully saved', 'Success Alert', {timeOut: 5000});
});

https://jsfiddle.net/z1t5cnyg/

首先，我要指出.attr('data-')和.data()之间存在差异。 jQuery Data vs Attr?

接下来，我清除了一些冗余开销，并为每个复选框添加了一个类。对于逻辑组织事物而言，类非常有用，它们允许您使用css轻松地格式化事物。

最后，代码中可能需要解释的部分。当你使用jQuery时，你正在使用数据的jQuery对象而不是数据本身。 jQuery对象中的第一项是数据本身，因此在复选框上使用$(...)[0]会返回checkbox元素本身。然后.checked是复选框的属性。

Jquery通过ajax发布，其中包含来自元素

1 个答案: