javascript - 如何根据点击从时间选择器字段中获取值？

Question

我使用 timepicker 动态创建了多个 tr。我正在使用 wickedpicker.min.js。我想获取针对 anchor 标记点击的相应时间选择器值，即提交点击。

<tr>
<td id="output"></td>
<td>1001</td>
<td class="mdl-data-table__cell--non-numeric">Name</td>
<td class="mdl-data-table__cell--non-numeric">Disposal</td>
<td class="mdl-data-table__cell--non-numeric">
<input type="text" id="timepicker-24-hr" name="timepicker-24-hr" class="timepicker-24-hr mdl-textfield__input sstart">
</td>
<td class="mdl-data-table__cell--non-numeric">
<input type="text" id="timepicker-24-hr" name="timepicker-24-hr" class="timepicker-24-hr mdl-textfield__input eend">
</td>
<td class="mdl-data-table__cell--non-numeric">
<a href="#" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent btn-sm setAttn">submit</a>
</td>
</tr>

我用它来获取值:

$(document).on("click", ".setAttn", function(e){
e.preventDefault();
alert($(".sstart").val());
alert($(".eend").val());
});

Answer 1

在这段代码中尝试这段代码，我使用了jquery并循环遍历所有input type=text标签，它将读取所有值直到设置的标签类型以 HTML 页面结束。

$(document).on("click", ".setAttn", function(e) {
  e.preventDefault();
  $(".sstart").each(function() {
    alert($(this).val());
  })

  $(".eend").each(function() {
    alert($(this).val());
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
  <td id="output"></td>
  <td>1001</td>
  <td class="mdl-data-table__cell--non-numeric">Name</td>
  <td class="mdl-data-table__cell--non-numeric">Disposal</td>
  <td class="mdl-data-table__cell--non-numeric">
    <input type="text" id="timepicker-24-hr" name="timepicker-24-hr" class="timepicker-24-hr mdl-textfield__input sstart">
  </td>
  <td class="mdl-data-table__cell--non-numeric">
    <input type="text" id="timepicker-24-hr" name="timepicker-24-hr" class="timepicker-24-hr mdl-textfield__input eend">
  </td>
  <td class="mdl-data-table__cell--non-numeric">
    <input type="text" id="timepicker-24-hr" name="timepicker-24-hr" class="timepicker-24-hr mdl-textfield__input sstart">
  </td>
  <td class="mdl-data-table__cell--non-numeric">
    <input type="text" id="timepicker-24-hr" name="timepicker-24-hr" class="timepicker-24-hr mdl-textfield__input eend">
  </td>
  <td class="mdl-data-table__cell--non-numeric">
    <a href="#" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent btn-sm setAttn">submit</a>
  </td>
</tr>

这是jsFiddle