关于改变递归函数

Question

有趣的问题，求助...

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

我正在做的是：

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

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

Maximum call stack size exceeded error.

如何在列表中的每个日期更改后将此功能停止到运行？或者有什么更聪明的做法吗？

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

Answer 1

您可以遍历每个元素并仅在值不同时才更改值。

$('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">

或者简单排除当前元素

$('input[name="productDate"]').not(this).val($(this).val())

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

解决方案一：

一个简单的解决方案是添加一个标志以停止传播更改（如果之前的更改已经在进行中）；请参阅下面的代码段。

方案二：

检查输入的值是否已经相同。

方案三：

最简单的解决方案是简单地调用 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 recursive function

javascript

recursion

jquery

onchange

datepicker