Question

我正在成功使用jQuery numpad（github page here）进行与动态内容表相关的数字输入。在每一行中有2个按钮（+和 - ）在点击时触发小键盘。

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

一种简单的方法是在页面加载的numpad初始化之前修改默认参数模板 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" );
});

...但是它看起来像是在任何点击上创建了一个新的numpad实例。单击即可，但当用户在表格的不同“+”或“ - ”按钮上多次单击时，会显示多个小写字母堆叠。当你关闭顶部的那个时，你会看到2on，依此类推。

我的问题：

- 如何使用不同的参数（不同的标题）创建2个不同的numpad实例，以便我可以显示正确的一个取决于用户请求的动作add / substract？

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

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

Answer 1

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

我的解决方案：

我在 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" );
});

jQuery numpad标题标题

1 个答案: