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(-)微调器附加到具有如下结构的多个TextBox中：

(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>（子div ）中，该按钮位于另一个{{1>}（父div ）中，其中包含您的文本框。所以简单的逻辑就是如下所示：

<div>获取当前按钮
$(this)转到包含按钮的div，即 child div
$(this).parent()转到包含TextBox的div，即 parent div
$(this).parent().parent()找到您的TextBox控件

您可以查看更新的CodePen Sample

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

1 个答案: