0

I have the following html to receive 2 or more telephone numbers

<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>

I am using the autotab library to type in the number without tabbing.

$("#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" });

The problem I am having is that the tab seems to always go to the last "inlinediv" element, meaning the first input for the first number autotabs to the second element of the last phone number, second one in this case. I have a feeling I just need to modify my selector but Im not sure how to do it without using $(this) which does not seem to work with the autotab function.

4

1 回答 1

1

查看文档，您无法指定选择器，尤其是当您有多个匹配项时。如果 autoTabstarget属性采用了一个在运行时评估的函数（就像许多插件一样），我们可以很容易地实现这一点，但是这对我来说似乎是一个解决方案，因为使用平面选择器你不能说这个 tab1 的每个实例选择下一个选项卡2。#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
   });

});

演示

于 2013-10-08T21:23:32.720 回答