更改输入文件的值（不起作用）

Question

我有一个小脚本，如果用户单击按钮，它会创建一个新的 div 块。为了计算创建的数量，我有一个隐藏的输入。每次创建新块时，都应更新此隐藏输入的值。

这就是我的脚本：

$(function () {
    $("#addBtn3").on("click", function () {
        imageBlockCount++;
        document.getElementById("counter").value = imageBlockCount;

        $(
            $.parseHTML(
                `<div class="form-group" id="gallery-${imageBlockCount}" >
                <label for="new-content-${imageBlockCount}">New Content</label>
                    <input type="text" name="content-${imageBlockCount}" class="form-control" id="new-content-${imageBlockCount} test-${imageBlockCount}" placeholder="new content" required>
            </div>`
            )
        ).appendTo("#newElements");
    });
});

这是我的 html 代码：

<div style="flex:auto;text-align:right;">
    <button id="addBtn3" type="button">Content +</button> 
</div>

<input name="counter" type="text" id="counter" value="0" hidden>

<div id="newElements">
</div>

但是在应该更新值的脚本中不起作用，但我不知道为什么，我没有找到任何其他如此不同的方法。

Answer 1

您的代码运行良好。将 console.log($("#counter").val()) 放在 appendTo 之后。

网页的 HTML 不会在输入字段的值更改时自动更新。

如果你想要这样的功能，你可以在更新 #counter 的值之后放置它：

$('#counter').attr('value', $('#counter').val());

$(function () {
  let imageBlockCount = 0
  $("#addBtn3").on("click", function () {
    imageBlockCount++;
    document.getElementById("counter").value = imageBlockCount;
    $('#counter').attr('value', $('#counter').val());
    $(
      $.parseHTML(
        `<div class="form-group" id="gallery-${imageBlockCount}"               <label for="new-content-${imageBlockCount}">New Content</label>
          <input type="text" name="content-${imageBlockCount}" class="form-control" id="new-content-${imageBlockCount} test-${imageBlockCount}" placeholder="new content" required>
        </div>`
      )
    ).appendTo("#newElements");
    console.log($('#counter').val())
  });
});

<div style="flex:auto;text-align:right;">
  <button id="addBtn3" type="button">Content +</button> 
</div>
  
<input name="counter" type="text" id="counter" value="0" hidden>
  
<div id="newElements">
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

更改输入文件的值（不起作用）

Change the value of Input file (Don't work)

javascript

counter

count

setvalue