在每个 div 中使用 id++ 休息输入

Question

我创建了一个脚本，不幸的是，它在dividually 中工作，我有一个表单，在单击时生成一个 div 并填写了表单字段，我添加了 "Reset button in each generated form,"只是每个表单都有一个生成的 id .

如何给一个 id + 1（或类似的按钮）

// RESET 
$(document).ready(function() {
    $('.variation').find('input:text').val('');
});
//Function
function resetAllValues() {
        $('.variation').find('input:text').val('');
}

Div 1:

    <div class="variation section-variation0"><input type="button" value="Delete variation" onclick="resetAllValues();">
<label>Field1:</label> <input type="text" name="variations0"  id="variations0" value=""> 
</div>

Div 2

    <div class="variation section-variation1"><input type="button" value="Delete  variation" onclick="resetAllValues();">
<label>Field1:</label> <input type="text" name="variations1"  id="variations1" value=""> 
</div>

等我希望我已经足够清楚了，感谢大家的帮助。

编辑我有一个代码，用于在每次单击按钮时生成一个新的 div，新的 divs 有 class，如 "section-variation0"、"section-variation1" 等

在第一个脚本中，我还为内部输入生成了一个 RESET 按钮，因此我需要为每个 div、"section-variation0"、"section-variation1" 等

此刻我的按钮重置了所有 divs 而不是 section-variation0 或 section-variation1

Answer 1

已修复 - 据我所知，这应该可以解决问题。值得注意的是，我已经删除了您的内联函数调用并将其移至 jquery。此外，我在您的按钮 "variationClass" 中添加了一个 class，以便每次按下按钮时都可以引用它。单击时，该函数将查找它的兄弟元素 "input" 并用空字符串填充它。但是，我鼓励如果您的 div 最终有多个输入元素，则向每个元素添加一个 class，然后使用此函数专门更改该输入 class 的值。我希望这是您正在寻找的解决方案！

$(".variationButton").on("click", function resetAllValues() {
  var inputField = $(this).siblings('input');
  inputField.val("");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="variation section-variation1"><input type="button" class="variationButton" value="Delete variation">
<label>Field1:</label> <input type="text" name="variations1"  id="variations1" value=""> 
</div>

<div class="variation section-variation0"><input type="button" class="variationButton" value="Delete variation">
<label>Field2:</label> <input type="text" name="variations0"  id="variations0" value=""> 
</div>

在每个 div 中使用 id++ 休息输入

Rest input in each div with id++

html

jquery

reset