Question

我正在尝试制作一种互动页面。基本上，我使用的是jQuery Repeater，代码如下所示。

HTML

<form class="repeater">
    <div data-repeater-list="group-a">
      <div data-repeater-item>
        <input type="text" name="text-input" value="A"/>
        <input data-repeater-delete type="button" value="Delete"/>
      </div>
      <div data-repeater-item>
        <input type="text" name="text-input" value="B"/>
        <input data-repeater-delete type="button" value="Delete"/>
      </div>
    </div>
    <input data-repeater-create type="button" value="Add"/>
</form>

此代码只是官方Repeater网站的一个示例。如您所见，每个输入都有一个name属性，如果初始化Repeater函数，它将类似于group-a[0][text-input]。所以，我想做的一件事就是处理这个group-a[0][text-input]选择器事件。

我能想出的唯一代码是：

$("input[name='group-a[][text-input]']").change(function () {
    // Kind of things.
});

但我不确定这是可能的。如果可能的话，我会制作物品订单行。例如，如果我在此列表中添加新项目，我可以更改此项目的价格或数量，并计算总金额。如果不是，请告诉我API或函数库。我有一点想法，我必须使用React或Vue.js来制作这些东西。

Answer 1

将"[data-repeater-list=group-a]:eq(0) [name=text-input]"选择器传递给jQuery()以选择input元素，这些元素是具有data-repeater-list属性的第一个元素的子节点

$("[data-repeater-list=group-a] [name=text-input]")
.on("change", function() {
  console.log(this.value)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="repeater">
  <div data-repeater-list="group-a">
    <div data-repeater-item>
      <input type="text" name="text-input" value="A" />
      <input data-repeater-delete type="button" value="Delete" />
    </div>
    <div data-repeater-item>
      <input type="text" name="text-input" value="B" />
      <input data-repeater-delete type="button" value="Delete" />
    </div>
  </div>
  <input data-repeater-create type="button" value="Add" />
</form>
<form class="repeater">
  <div data-repeater-list="group-a">
    <div data-repeater-item>
      <input type="text" name="text-input" value="A" />
      <input data-repeater-delete type="button" value="Delete" />
    </div>
    <div data-repeater-item>
      <input type="text" name="text-input" value="B" />
      <input data-repeater-delete type="button" value="Delete" />
    </div>
  </div>
  <input data-repeater-create type="button" value="Add" />
</form>

选择器属性值名称使用jQuery进行多维事件处理

HTML

1 个答案: