javascript - 关于更改递归函数

Question

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

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

我正在做的是:

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

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

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())