Question

我有以下html接收2个或更多电话号码

<div data-bind="foreach: Telephones" id="Telephones">
<div class="inlinediv">
                    <input maxlength="3" size="3" type ="text" data-bind="value: Prefixe" class="tab1 no-margin" style="width: 40px;" />
                    <input maxlength="3" size="3" type ="text" data-bind="value: Telephone" class="tab2 no-margin" style="width: 40px;" />
                    <input maxlength="4" size="4" type ="text" data-bind="value: Suffixe" class="tab3 no-margin" style="width: 60px;" />
                </div>
<div class="inlinediv">
                    <input maxlength="3" size="3" type ="text" data-bind="value: Prefixe" class="tab1 no-margin" style="width: 40px;" />
                    <input maxlength="3" size="3" type ="text" data-bind="value: Telephone" class="tab2 no-margin" style="width: 40px;" />
                    <input maxlength="4" size="4" type ="text" data-bind="value: Suffixe" class="tab3 no-margin" style="width: 60px;" />
                </div>
</div>

我正在使用autotab库输入数字而没有标签。

$("#Telephones .tab1").autotab({ target: $("#Telephones .tab1").next("#Telephones .tab2"), format: "numeric" });
$("#Telephones .tab2").autotab({ previous: $("#Telephones .tab1"), target: $("#Telephones .tab2").next("#Telephones .tab3"), format: "numeric" });
$("#Telephones .tab3").autotab({ previous: $("#Telephones .tab2"), target: $("#Telephones .tab3").next().next("#Telephones .tab4"), format: "numeric" });

我遇到的问题是标签似乎总是转到最后一个“inlinediv”元素，这意味着第一个数字autotabs的第一个输入到最后一个电话号码的第二个元素，在这种情况下是第二个。我有一种感觉，我只需要修改我的选择器，但我不知道如何不使用$（this），这似乎不适用于autotab功能。

Answer 1

查看文档时，您无法指定选择器，尤其是当您有多个匹配项时。如果autoTabs target属性采用了一个在运行时进行评估的函数（就像许多插件一样），我们可以很容易地实现这一点，但这里对我来说似乎是一个解决方案，因为使用平面选择器你不能说此选项卡的每个实例1选择下一个tab2。 #Telephones .tab1会选择所有.tab1。

var format = 'numeric';
$('#Telephones .inlinediv').each(function(){

    var $this = $(this);
        $tab1 = $this.find('.tab1'), 
        $tab2 = $this.find('.tab2'), 
        $tab3 =  $this.find('.tab3'),
        $next = $this.next().find('.tab1');

    $tab1.autotab({
        target: $tab2,
        format: format
     });
     $tab2.autotab({
        previous:$tab1,
        target: $tab3,
        format: format
     });
     $tab3.autotab({
        previous:$tab2,
        target: $next,
        format: format
   });

});

<强> Demo

JQuery选择器没有使用autotab选择正确的元素

1 个答案: