Question

有趣的问题，请帮忙......

我有一个包含产品列表的页面。每个产品都有自己的日期输入字段。当您更改一个产品的日期时，所有其他产品需要获得相同的日期（如果我将第一个产品的日期设置为1.1.2018。所有其他产品日期字段将填充1.1.2018。）。

我正在做的是：

$('input[name="productDate"]').on('change', function () {
    $('input[name="productDate"]').val($(this).val());
});

这是简化版。我正在使用带有替代字段的jquery datepicker，当手动设置日期时触发更改事件。所以我的愚蠢的递归函数一直运行直到我得到

最大调用堆栈大小超出错误。

如何在列表上的每个日期更改后停止运行此功能？或者有更聪明的事情吗？

不要问为什么我只是没有为所有产品设置一个输入日期......而不是由我来决定。

Answer 1

您可以循环遍历每个元素，只有在它不同时才更改值。

select  AccountCode , 'All Companies' as divisionName , AcName , 
LF_AccountType , Sum(ISNULL(runningBalance,0)) as  runningBalance  
from Table
group by AccountCode, AcName , LF_AccountType

$('input[name="productDate"]').on('change', function () {
    var value = $(this).val()
    
    $('input[name="productDate"]').each(function () {
      if ($(this).val() != value) {
        $(this).val(value).change() // just a trigger test
      }
    })
});

或简单排除当前元素

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" name="productDate">
<input type="text" name="productDate">
<input type="text" name="productDate">
<input type="text" name="productDate">
<input type="text" name="productDate">
<input type="text" name="productDate">
<input type="text" name="productDate">
<input type="text" name="productDate">
<input type="text" name="productDate">

Answer 2

Javascript有一个方法stopPropagation()可以阻止操作触发更多事件。在你的情况下它应该是有用的。

$('input[name="productDate"]').on('change', function (e) {
  $('input[name="productDate"]').val($(this).val());
  e.stopPropagation();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" name="productDate">
<input type="text" name="productDate">

Answer 3

解决方案1：

一个简单的解决方案是添加一个标志，以便在前一个更改已经进行时停止传播更改;请参阅下面的代码段。

解决方案2：

检查输入值是否已相同。

解决方案3：

最简单的解决方案是简单地调用event.stopPrpogation。实际上，这是我想要的解决方案，但我不确定在您的应用程序中是否需要将事件传播到其他地方。

$('input[name="productDate"]').on('change', function() {
  if (this.__editing) {
    return;
  }
  this.__editing = true;
  $('input[name="productDate"]').val($(this).val());
  delete this.__editing;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="productDate" value="Product1">
<input name="productDate" value="Product2">
<input name="productDate" value="Product3">
<input name="productDate" value="Product4">

On Change递归函数

3 个答案: