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

【问题标题】：How to use jQuery input spinner in GridView如何在 GridView 中使用 jQuery 输入微调器
【发布时间】：2015-11-07 19:13:38
【问题描述】：

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

当我在 GridView 中使用它时，当我单击 + 或 - 时，所有输入都会更改，但我只想更改该行中的输入。如何更改代码以在网格视图中使用？我的 Grid View 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>

【问题讨论】：

标签： jquery asp.net twitter-bootstrap gridview spinner

【解决方案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) 中，该按钮又位于另一个包含您的 TextBox 的 <div> (parent div) 中。所以简单的逻辑就是上一层：

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

您可以查看更新的CodePen Sample

【讨论】：