我想使用jquery激活一个基于另一个字段长度的选项卡

Question

我有一个文本字段，其中的数字长度将在5到7个字符之间。和一个选项卡处于活动状态，而其他两个选项卡不活动。我正在尝试根据文本字段的长度激活一个不同的选项卡。

<div class="form-group">

    <label class="col-md-offset-9 col-xs-1 control-label" for="NoDD">No:</label>  
    <div class="col-xs-2">
        <input id="NoDD" name="NoDD" placeholder="droit d'accès" class="form-control input-md" required="" type="text">          
    </div>
    <label class='col-md-1' for='radio'>Prix</label>

    <ul class='nav nav-pills'>
        <li class="active"><a data-toggle='pill' href='#annuel'>Annuel</a></li>
        <li><a data-toggle='pill' href='#journalier'>Journalier</a></li>
        <li><a data-toggle='pill' href='#location'>Location</a></li>
    </ul>

    <div class='tab-content'>
        <div id='annuel' class='tab-pane fade in active'>

            <div class='col-md-offset-1 col-md-3'>
                <label class='radio-inline' for='radio-0'>Jusqu'au 9 déc. 2014 <br>
                    <input name='radio' id='radio-0' type='radio' value="300">300$
                </label>
            </div>
            <div class='col-md-3'>
                <label class='radio-inline' for='radio-1'>Après le 9 déc. 2014 <br>
                    <input name='radio' id='radio-1' type='radio' value="360">360$
                </label>
            </div>
            <div class='col-md-3'>
                <label class='radio-inline' for='radio-2'>Antique 1995 et moins <br>
                    <input name='radio' id='radio-2' type='radio' value="215">215$
                </label>
            </div>

        </div>

        <div id='journalier' class='tab-pane fade'>

            <div class='col-md-offset-1 col-md-3'>
                <label class='radio-inline' for='radio-6'>1 jour <br>
                    <input name='radio' id='radio-6' type='radio' value="60">60$
                </label>
            </div>
            <div class='col-md-3'>
                <label class='radio-inline' for='radio-7'>3 jours  <br>
                    <input name='radio' id='radio-7' type='radio' value="120">120$
                </label>
            </div>
            <div class='col-md-3'>
                <label class='radio-inline' for='radio-8'>7 jours <br>
                    <input name='radio' id='radio-8' type='radio' value="200" >200$
                </label>
            </div>

        </div>

        <div id='location' class='tab-pane fade'>

            <div class='col-md-offset-2 col-md-3'>
                <label class='radio-inline' for='radio-9'>Location <br>
                    <input name='radio' id='radio-9' type='radio' value="560">560$
                </label>
            </div>
            <div class='col-md-3'>
                <label class='radio-inline' for='radio-10'>Remplacement  <br>
                    <input name='radio' id='radio-10' type='radio' value="20">20$
                </label>
            </div>

        </div>
    </div>
</div>
<script>
$( document ).ready(function() {
    $("#NoDD").on("input", function() {

        var quantity = $(this).val().length;

        if (quantity == 7) {
            $("ul li").hide().eq(0).addClass("active").show();     
            $(".tab-pane").removeClass("in active");
            $("#annuel").addClass(" in active");
        }
        else if (quantity == 6) {
            $("ul li").hide().eq(1).addClass("active").show();     
            $(".tab-pane").removeClass("in active");
            $("#journalier").addClass(" in active");
        }
        else if (quantity == 5) {
            $("ul li").hide().eq(2).addClass("active").show();     
            $(".tab-pane").removeClass("in active");
            $("#location").addClass(" in active");
        }
    }); 
});     
</script>

Answer 1

也许是这样的？

$("#NoDD").on("input", function() {
  var quantity = $(this).val().length;
  if (quantity == 5) {
   // do something
  } else if (quantity == 6) {
   // do something
  } else if (quantity == 7) {
   // do something
  }
});

https://jsfiddle.net/vtxtcev7/