如何在 GridView 中使用 jQuery 输入微调器

Question

我正在搜索有关使用输入号码来选择号码的信息。我找到了这个 CodePen Sample: Bootstrap 3 input-spinner，它很好，但我遇到了问题。

当我在 GridView 中使用它时，当我单击 + 或 - 时，所有输入都会更改，但我只想更改该行中的输入。如何更改代码以在网格视图中使用？我的网格视图 ID 是 grdPageLayouts，提交的模板是：

<ItemTemplate>
    <div class="input-group spinner">
        <asp:TextBox runat="server" ID="txtAppearanceOrder" CssClass="form-control" Text='<%#Eval("AppearanceOrder").ToString() %>'></asp:TextBox>
        <div class="input-group-btn-vertical">
            <button class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button>
            <button class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>
        </div>
    </div>
</ItemTemplate>

Answer 1

使用相同的 CodePen Sample: Bootstrap 3 input-spinner 您可以将 Up(+) / Down(-) 微调器附加到具有相同结构的多个文本框，如下所示：

(function ($) {
  $('.spinner .btn:first-of-type').on('click', function() {
    $(this).parent().parent().find('input[type=text]').val( parseInt($(this).parent().parent().find('input[type=text]').val(), 10) + 1);
  });
  $('.spinner .btn:last-of-type').on('click', function() {
    $(this).parent().parent().find('input[type=text]').val( parseInt($(this).parent().parent().find('input[type=text]').val(), 10) - 1);
  });
})(jQuery);

由于 Spinner 按钮位于 <div>（child div）中，而后者又位于另一个 <div>（parent div) 包含您的文本框。所以简单的逻辑就是往上一层：

$(this)获取当前按钮
$(this).parent() 到达包含按钮的 div 即 child div
$(this).parent().parent() 到达包含您的文本框的 div 即 parent div
$(this).parent().parent().find('input[type=text]') 找到您的 TextBox 控件

您可以查看更新后的内容CodePen Sample

如何在 GridView 中使用 jQuery 输入微调器

How to use jQuery input spinner in GridView

asp.net

jquery

gridview

spinner

twitter-bootstrap