更新：

Question

我对jquery很新，请为我的下面问题提供任何帮助：

我有一个输入，用户可以输入一些小于3位的号码，并且 前缀以＆＃34开头;某些＆＃ 34;数字 ，如果满足条件，将显示一个特定元素，否则将被隐藏。

我的问题是，如果我有10个或更多这种情况，我的代码会很长，显然会降低性能。有没有简单的方法来实现这个目标？

＆＃13;

$(function(c) {

    $('#check').on('keyup change', function(c) {
    var one = $('#check');
    if( (one.val() == 123) || (one.val() == 124) ) {
            $('#one').show();
        } else if (this.value.length < 3 ) {
            $('#one').hide();
        }
    }); 
    
    $('#check').on('keyup change', function(c) {
    var two = $('#check');
    if( (two.val() == 234) || (two.val() == 235) ) {
            $('#two').show();
        } else if (this.value.length < 3 ) {
            $('#two').hide();
        }
    });
    
        $('#check').on('keyup change', function(c) {
    var three = $('#check');
    if( (three.val() == 345) || (three.val() == 346) ) {
            $('#three').show();
        } else if (this.value.length < 3 ) {
            $('#three').hide();
        }
    });
});

＆＃13;

#one {
display: none;
}
#two {
display: none;
}
#three {
display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<input type="text" id="check" maxlength="10">

<div id="one">
<br>
ONE
</div>

<div id="two">
<br>
TWO
</div>

<div id="three">
<br>
THREE
</div>

＆＃13;

提前致谢！

Answer 1

试试这个：

$('#check').on('keyup change', function(c) {

    //initially hide all
    if(this.value.length < 3){
        $('#three, #two, #one').hide();
    }
    else{

        switch(parseInt(this.value)){

            case 123: case 124: $('#one').show(); break;
            case 234: case 235: $('#two').show(); break;
            case 345: case 346: $('#three').show(); break;
        }

    }
});

Answer 2

当然可以简化OP代码。这样的事情。

$(function() {//arg c is not used

    $('#check').on('keyup change', function() {//c is event object and is not used
    //note that 'c' from outer function is not 'c' in inner function
    //no need to re-request #check
    var one = $(this);//$('#check'); 
    $('#one, #two, #three').hide();//all in one
    if( (one.val() == 123) || (one.val() == 124) ) {
            $('#one').show();
            //optionnaly
            return;
        } 
    if( (one.val() == 234) || (one.val() == 235) ) {
            $('#two').show();
            //optionally
            return;
        } 
    if( (one.val() == 345) || (one.val() == 346) ) {
            $('#three').show();
        } 

    }); 
    
});

#one {
display: none;
}
#two {
display: none;
}
#three {
display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<input type="text" id="check" maxlength="10">

<div id="one">
<br>
ONE
</div>

<div id="two">
<br>
TWO
</div>

<div id="three">
<br>
THREE
</div>

Answer 3

少于3位或等于3位？

您的问题和代码令人困惑，但请尝试以下代码：

<强> jQuery的：

$('#check').on('keyup change', function() {
    var val = $('#check').val();
    if ($.isNumeric(val) && val.length == 3) { //if value is numeric and contain 3 digits
        $('#one').toggle(val[0]=='1');   //show if first digit is 1 else hide
        $('#two').toggle(val[0]=='2');   //show if first digit is 2 else hide
        $('#three').toggle(val[0]=='3'); //show if first digit is 3 else hide
    } 
    else {
        $('#one,#two,#three').hide();   //hide them all
    }
});

<强> CSS：

#one,
#two,
#three {
   display: none;
}

祝你好运并继续学习！如果我误解了你的问题，请纠正我。

更新：

似乎这就是你需要的：

$('#check').on('keyup change', function() {
    var val = $('#check').val();
    var prf = val.substring(0,3);
    if ($.isNumeric(val) && val.length >= 3) { //if values is numeric and contain at least 3 digit
        $('#one').toggle(prf=='123'); //show if first 3 digits is '123' else hide
        $('#two').toggle(prf=='234'); //show if first 3 digits is '234' else hide
        $('#three').toggle(prf=='345'); //show if first 3 digits is '345' else hide
    } else {
        $('#one,#two,#three').hide();
    }
});

Answer 4

或者，如果您想要输入更少，您可以执行以下操作：

$(function(c) {
 a=['one','two','three','four'];
 $('#check').on('keyup',function(){
  var cval=$('#check').val()
  a.forEach(function(id,i){
   var key=new RegExp('^'+(i+1)+(i+2)+'['+(i+3)+(i+4)+']');
   $('#'+id).toggle(key.test(cval))
  })
 })
});

#one,#two,#three,#four { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<input type="text" id="check" maxlength="10">

<div id="one">
<br>
ONE
</div>

<div id="two">
<br>
TWO
</div>

<div id="three">
<br>
THREE
</div>

<div id="four">
<br>
FOUR
</div>

只需扩展数组a，您甚至可以覆盖更多案例。但很快你会得到两位数的数字......; - ）

JQuery IF具有多个值显示和隐藏元素

4 个答案:

更新：