0

我成功地使用jQuery 数字键盘（此处为 github 页面）进行与具有动态内容的表相关的数字输入。在每一行中，有 2 个按钮（+ 和 -）在点击时触发小键盘。

由于用户可以执行 2 种选项（加法或减法），我有兴趣在小键盘的头部添加“加法”或“减法”标题，以帮助用户了解实际执行的操作。

一个简单的方法是修改默认参数模板displayTpl在页面加载时初始化小键盘之前添加<h2>Substract</h2>到默认模板。

$.fn.numpad.defaults.displayTpl = '<h2>Substract</h2><input type="text" class="form-control" />';
$('.numpad').numpad();  // initialise numpad

在这种情况下，每次用户单击任何按钮时，小键盘都会显示“Substract”标题。

我还尝试在“点击”功能中初始化小键盘：

$(".b_add" ).on( "click", function() {
    $.fn.numpad.defaults.displayTpl = '<h2>Add</h2><input type="text" class="form-control" />';
    $('.numpad').numpad();        // initialise numpad
    $related_input = $(this).parent('form').find('input[name="quantitat_add"]');
    $related_input.trigger( "click" );
});
$(".b_substract" ).on( "click", function() {
    $.fn.numpad.defaults.displayTpl = '<h2>Substract</h2><input type="text" class="form-control" />';
    $('.numpad').numpad();        // initialise numpad
    $related_input = $(this).parent('form').find('input[name="quantitat_substract"]');
    $related_input.trigger( "click" );
});

...但是看起来像在任何点击时都会创建一个新的小键盘实例。单击时可以，但是当用户在表格的不同“+”或“-”按钮上单击多次时，会显示堆叠的几个小键盘。当您关闭顶部时，您会看到 2on one，依此类推。

我的问题：

- 我怎样才能有 2 个不同的小键盘实例，使用不同的参数（不同的标题）创建，以便我可以根据用户请求的操作添加/减去显示正确的实例？

- 或者......有没有办法可以“即时”更改displayTpl选项？

-关于如何解决它的任何其他想法？

4

1 回答 1

0

我自己回答了这个问题，因为我找到了一个简单的好方法来解决它。它可能对其他人有用。

我的解决方案：

我在displayTpl中创建了一个带有<h2>空标签的小键盘，用作标题容器。它的内容将根据要执行的操作进行动态修改：

$.fn.numpad.defaults.displayTpl = '<h2 id="numpad_title"></h2><input type="text" class="form-control" />';
$('.numpad').numpad();   // initialise numpad

$(".b_add" ).on( "click", function() {
    $("#numpad_title").html("Add");  // Set title to 'Add'
    $related_input = $(this).parent('form').find('input[name="quantitat_add"]');
    $related_input.trigger( "click" );
});
$(".b_substract" ).on( "click", function() {
    $("#numpad_title").html("Substract");    // Set title to 'Substract'     
    $related_input = $(this).parent('form').find('input[name="quantitat_substract"]');
    $related_input.trigger( "click" );
});
于 2018-03-02T16:22:33.213 回答