Question

我有这个javascript：

$(function() {

  $("#generate").click(function() {
  $("#id").val(generateID($("#age").val()));
    var increaseBy = increaseBase(generateSOCS());

    $("#numbersoc1").val(increaseBy(0));
    $("#numbersoc2").val(increaseBy(1));
    $("#numbersoc3").val(increaseBy(2));
    $("#numbersoc4").val(increaseBy(3));
  });

  $.getJSON("age.json", function(json) {

        $("#age").empty();
        $("#age").append($('<option>').text("Select age"));

        $.each(json, function(i, obj){
            $("#age").append($('<option>').text(obj.age).attr('value', obj.permanent));
        });
    });
});

function increaseBase(base) {
  return function(value) {
    return "SOCS" + (base + value).toString(16).toUpperCase()
  }
}

function generateSOCS() {
  return random(10, 16777215);
}

function generateID(permanent) {
    if(permanent == "Select age")
        return "Please select your age first!";
        var add = 5
    return (permanent + random(1,100) + random(100,50000) + ++add);
}

function random(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

这个html：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='script.js'></script>
<h1>Number Generator</h1>

<div>
 <select name="age" id="age"></select><br/>

  <input id="generate" type=button value="Generate" /><br/><br/> 
  <br/>
  Identifier<br/>
   <input id="id" placeholder="Identification Number" /><br/><br/>
  Number<br/>
  <input id="numbersoc1" placeholder="Number Soc. S1." /><br/>
  <input id="numbersoc2" placeholder="Number Soc. S2." /><br/>
  <input id="numbersoc3" placeholder="Number Soc. S3." /><br/>
  <input id="numbersoc4" placeholder="Number Soc. S4." /><br/>
</div>

这个json：

[
    { "age": "18", "permanent": "AA" },
    { "age": "19", "permanent": "BB" },
    { "age": "20", "permanent": "CC" }
]

当我在下拉菜单中单击“生成”按钮而不选择年龄时，“标识符”框将显示以下内容：“请先选择您的年龄！”这是正常的和预期的但是我想对4个数字框做同样的事情。帮助将不胜感激。

此外，代码可以更高效吗？我的意思是更短。如果是的话怎么样？

提前谢谢。

Answer 1

您应首先检查#age中所选值的值这可以通过简单的if else语句来实现。

$("#generate").click(function() {
  if ($('#age').val() !== '<your default value>') {
    //your code for setting the values of the #numbersoc* inputs
  } else {
    //code that notifies the user about needing to select an age.
  }
});

请注意，对于此示例，您需要在年龄选择标记中将默认值作为选项这可以通过使用以下选项标记来实现。

<option selected="true" disabled="disabled">Select your age</option>

修改
将解决方案添加到OP的代码中。

$(function() { $("#generate").click(function() { //checks if the value of #id is an empty string if ($("#id").val(generateID($("#age").val())).val() == '') { //alerts the user that they should enter an age //feel free to make something nice here alert('Please insert age first'); } else { var increaseBy = increaseBase(generateSOCS()); $("#numbersoc1").val(increaseBy(0)); $("#numbersoc2").val(increaseBy(1)); $("#numbersoc3").val(increaseBy(2)); $("#numbersoc4").val(increaseBy(3)); } }); //uncomment this when using the json /*$.getJSON("age.json", function(json) { $("#age").empty(); $("#age").append($('<option>').text('Select age').attr('value', 'Select age') .attr('selected', true).prop('disabled','disabled')); $.each(json, function(i, obj) { $("#age").append($('<option>').text(obj.age).attr('value', obj.permanent)); }); });*/ }); function increaseBase(base) { return function(value) { return "SOCS" + (base + value).toString(16).toUpperCase() } } function generateSOCS() { return random(10, 16777215); } function generateID(permanent) { // simple check for default, empty or null value if ($('#age').val() == 'Select age' || $('#age').val() == '' || $('#age').val() == null) { return; } var add = 5 return (permanent + random(1, 100) + random(100, 50000) + ++add); } function random(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min + 1)) + min; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src='script.js'></script> <h1>Number Generator</h1> <div> <select name="age" id="age">  <option selected="true" disabled="disabled">Select age</option> <option>1</option> <option>2</option> <option>3</option> </select> <br/> <input id="generate" type=button value="Generate" /> <br/> <br/> <br/> Identifier <br/> <input id="id" placeholder="Identification Number" /> <br/> <br/> Number <br/> <input id="numbersoc1" placeholder="Number Soc. S1." /> <br/> <input id="numbersoc2" placeholder="Number Soc. S2." /> <br/> <input id="numbersoc3" placeholder="Number Soc. S3." /> <br/> <input id="numbersoc4" placeholder="Number Soc. S4." /> <br/> </div>

Answer 2

你必须像在generateRandom（）中那样进行检查，如下所示：

$(function() {

      $("#generate").click(function() {
      if($("#age").val() !== 'Select age'){
      $("#id").val(generateID($("#age").val()));
        var increaseBy = increaseBase(generateSOCS());

        $("#numbersoc1").val(increaseBy(0));
        $("#numbersoc2").val(increaseBy(1));
        $("#numbersoc3").val(increaseBy(2));
        $("#numbersoc4").val(increaseBy(3));
       }else{
             $("#id").val('Please select an age');
        var errMessage = 'Please select your age';
            if(!$("#numbersoc1").val())
                $("#numbersoc1").val(errMessage)
            if(!$("#numbersoc2").val())
                $("#numbersoc2").val(errMessage)
            if(!$("#numbersoc3").val())
                $("#numbersoc3").val(errMessage)
            if(!$("#numbersoc4").val())
                $("#numbersoc4").val(errMessage)
        }
      });

      $.getJSON("age.json", function(json) {

            $("#age").empty();
            $("#age").append($('<option>').text("Select age"));

            $.each(json, function(i, obj){
                $("#age").append($('<option>').text(obj.age).attr('value', obj.permanent));
            });
        });
    });

    function increaseBase(base) {
      return function(value) {
        return "SOCS" + (base + value).toString(16).toUpperCase()
      }
    }

    function generateSOCS() {
      return random(10, 16777215);
    }

    function generateID(permanent) {
              var add = 5
return (permanent + random(1,100) + random(100,50000) + ++add);
    }

    function random(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }

如果未选择，则显示预定义值 - Javascript

2 个答案: