Question

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<title>Nutrition-Dossier</title>

<style type="text/css">
    h1 {
        text-align: center;
        color: #000080;
        font-size: 60;
    }

        table, th, td 
        {
            margin:10px 0;
            border:solid 1px #333;
            padding:2px 4px;
            font:15px Verdana;
        }
        th {
            font-weight:bold;
        }

        table 
{ 
margin-left: auto;
margin-right: auto;
}


table {
  border-collapse: separate;
  border-spacing: 5px;
  background: #3090C7 url("gradient.gif") bottom left repeat-x;
  color: ;
}

td, th {
  background: #fff;
  color: #000;
}

  .btnGetNutrition  {
    -moz-box-shadow:inset 0px 39px 0px -24px #e67a73;
    -webkit-box-shadow:inset 0px 39px 0px -24px #e67a73;
    box-shadow:inset 0px 39px 0px -24px #e67a73;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e4685d), color-stop(1, #eb675e));
    background:-moz-linear-gradient(top, #e4685d 5%, #eb675e 100%);
    background:-webkit-linear-gradient(top, #e4685d 5%, #eb675e 100%);
    background:-o-linear-gradient(top, #e4685d 5%, #eb675e 100%);
    background:-ms-linear-gradient(top, #e4685d 5%, #eb675e 100%);
    background:linear-gradient(to bottom, #e4685d 5%, #eb675e 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e4685d', endColorstr='#eb675e',GradientType=0);
    background-color:#e4685d;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    border:1px solid #ffffff;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Verdana;
    font-size:13px;
    font-weight:bold;
    font-style:italic;
    padding:6px 15px;
    text-decoration:none;
    text-shadow:0px 1px 6px #b23e35;
}
.btnGetNutrition :hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #eb675e), color-stop(1, #e4685d));
    background:-moz-linear-gradient(top, #eb675e 5%, #e4685d 100%);
    background:-webkit-linear-gradient(top, #eb675e 5%, #e4685d 100%);
    background:-o-linear-gradient(top, #eb675e 5%, #e4685d 100%);
    background:-ms-linear-gradient(top, #eb675e 5%, #e4685d 100%);
    background:linear-gradient(to bottom, #eb675e 5%, #e4685d 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eb675e', endColorstr='#e4685d',GradientType=0);
    background-color:#eb675e;
}
.myButton:active {
    position:relative;
    top:2px;
}


</style>




<style style="text/css">
body {
  background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSmt8Kp8jgPmMTCzmLaYXCYlkl-cPGC7gwcnPpaBtPADHrAq2YirQ");
  background-size: 1350px 700px;
  background-repeat:no-repeat;
}
</style> 

</head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>




<h1><blink>NUTRITION DOSSIER</blink></h1>

 <form>

    <center><font face="verdana" size="03" style="color:darkGreen" text="bold">Enter Food keyword: <input type="text" name="food" id="txtFood"></b></center><br /></font>
  <center><button id= "btnGetNutrition"  class= btnGetNutrition type="button" value = 'Get Nutrition Data'>Get Food Details</button></center><br/><br/>

   <center><font face="verdana" size= "03" color="Brown">Search Results are below:</font></center>




   <div id="resultDiv">
   </div>
    <br/>

    </form> 




<script>



$('#btnGetNutrition').click(function () {
      var resultElement = $('#resultDiv');
      resultElement.html('');

      $('#txtFood').keypress(function (e) {
          var key = e.which;
          if(key == 13)  // the enter key code
           {
             $('input[name = btnGetNutrition]').click();
             return false;  
           }
         });

      var requestData = $('#txtFood').val();


             if(requestData=='')
       {
                   alert('Enter a valid food keyword to obtain Nutrition Dossier');
       }



      var nutrientDataUrl;
      var NutrientData;
      var foodDataUrl = 'https://api.nal.usda.gov/ndb/search/?format=json&q=' + requestData + '&sort=n&max=01&offset=0&api_key=xahKL10HPCqKkmh8B9Xai5UUbcHSx8ihvgoUhWuX';
      var foodData; 


      $.getJSON(foodDataUrl, function(data) {
        foodData = data;

      }).then(function() {
    nutrientDataUrl = 'https://api.nal.usda.gov/ndb/nutrients/?format=json&api_key=xahKL10HPCqKkmh8B9Xai5UUbcHSx8ihvgoUhWuX&nutrients=205&nutrients=204&nutrients=208&nutrients=269&ndbno=' + foodData.list.item[0].ndbno;

        $.getJSON(nutrientDataUrl, function(data) {
          NutrientData = data;
        }).then(function() {

          $('#resultDiv').append('<table><caption>' + NutrientData.report.foods[0].name + '</caption><tr><th>Nutrient</th><th>Unit</th><th>Value</th></tr>');


           NutrientData.report.foods[0].nutrients.forEach(function(item, index){

                   $('#resultDiv table').append('<tr><td>' + item.nutrient + '</td><td>' + item.unit + '</td><td>' + item.value + '</td></tr>');
          }) 
          $('#resultDiv table').append('</table>');

        }).fail(function() {
            alert('failed');
        });
      });
      });

</script>


</body>
</html>


    enter code here

点击进入网站

应该与点击按钮一样。

当我点击进入按钮时，它应显示没有键盘敲击键的数据。

目前，如果我点击标签然后输入，则会出现数据。所以我想在程序中使用该功能。

另外，我想利用这个源代码[在网站上传]

Answer 1

您使用的是$('input[name=btnGetNutrition]').click();，但您应该使用$('input[id=btnGetNutrition]').click();

由于您的按钮有id而不是name

<button id="btnGetNutrition" class="btnGetNutrition" type="button" value='Get Nutrition Data'>Get Food Details</button>

$('#txtFood').keypress(function(e)内也有$('#btnGetNutrition').click(function(e) {。将$('#txtFood').keypress移出。

我已在点击功能中添加console.log("click trigger")，因此您可以在输入按键时看到它触发

工作示例

＆＃13;

$('#txtFood').keypress(function(e) {
  var key = e.which;
  if (key == 13) // the enter key code
  {
    console.log(key)
    $('#btnGetNutrition').trigger("click");
    return false;
  }
});
$('#btnGetNutrition').click(function(e) {
  console.log("click trigger")
  var resultElement = $('#resultDiv');
  resultElement.html('');



  var requestData = $('#txtFood').val();


  if (requestData == '') {
    alert('Enter a valid food keyword to obtain Nutrition Dossier');
  }



  var nutrientDataUrl;
  var NutrientData;
  var foodDataUrl = 'https://api.nal.usda.gov/ndb/search/?format=json&q=' + requestData + '&sort=n&max=01&offset=0&api_key=xahKL10HPCqKkmh8B9Xai5UUbcHSx8ihvgoUhWuX';
  var foodData;


  $.getJSON(foodDataUrl, function(data) {
    foodData = data;

  }).then(function() {
    nutrientDataUrl = 'https://api.nal.usda.gov/ndb/nutrients/?format=json&api_key=xahKL10HPCqKkmh8B9Xai5UUbcHSx8ihvgoUhWuX&nutrients=205&nutrients=204&nutrients=208&nutrients=269&ndbno=' + foodData.list.item[0].ndbno;

    $.getJSON(nutrientDataUrl, function(data) {
      NutrientData = data;
    }).then(function() {

      $('#resultDiv').append('<table><caption>' + NutrientData.report.foods[0].name + '</caption><tr><th>Nutrient</th><th>Unit</th><th>Value</th></tr>');


      NutrientData.report.foods[0].nutrients.forEach(function(item, index) {

        $('#resultDiv table').append('<tr><td>' + item.nutrient + '</td><td>' + item.unit + '</td><td>' + item.value + '</td></tr>');
      })
      $('#resultDiv table').append('</table>');

    }).fail(function() {
      alert('failed');
    });
  });
});

＆＃13;

h1 {
  text-align: center;
  color: #000080;
  font-size: 60;
}

table,
th,
td {
  margin: 10px 0;
  border: solid 1px #333;
  padding: 2px 4px;
  font: 15px Verdana;
}

th {
  font-weight: bold;
}

table {
  margin-left: auto;
  margin-right: auto;
}

table {
  border-collapse: separate;
  border-spacing: 5px;
  background: #3090C7 url("gradient.gif") bottom left repeat-x;
  color: ;
}

td,
th {
  background: #fff;
  color: #000;
}

.btnGetNutrition {
  -moz-box-shadow: inset 0px 39px 0px -24px #e67a73;
  -webkit-box-shadow: inset 0px 39px 0px -24px #e67a73;
  box-shadow: inset 0px 39px 0px -24px #e67a73;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e4685d), color-stop(1, #eb675e));
  background: -moz-linear-gradient(top, #e4685d 5%, #eb675e 100%);
  background: -webkit-linear-gradient(top, #e4685d 5%, #eb675e 100%);
  background: -o-linear-gradient(top, #e4685d 5%, #eb675e 100%);
  background: -ms-linear-gradient(top, #e4685d 5%, #eb675e 100%);
  background: linear-gradient(to bottom, #e4685d 5%, #eb675e 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e4685d', endColorstr='#eb675e', GradientType=0);
  background-color: #e4685d;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  border: 1px solid #ffffff;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: Verdana;
  font-size: 13px;
  font-weight: bold;
  font-style: italic;
  padding: 6px 15px;
  text-decoration: none;
  text-shadow: 0px 1px 6px #b23e35;
}

.btnGetNutrition :hover {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #eb675e), color-stop(1, #e4685d));
  background: -moz-linear-gradient(top, #eb675e 5%, #e4685d 100%);
  background: -webkit-linear-gradient(top, #eb675e 5%, #e4685d 100%);
  background: -o-linear-gradient(top, #eb675e 5%, #e4685d 100%);
  background: -ms-linear-gradient(top, #eb675e 5%, #e4685d 100%);
  background: linear-gradient(to bottom, #eb675e 5%, #e4685d 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eb675e', endColorstr='#e4685d', GradientType=0);
  background-color: #eb675e;
}

.myButton:active {
  position: relative;
  top: 2px;
}

body {
  background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSmt8Kp8jgPmMTCzmLaYXCYlkl-cPGC7gwcnPpaBtPADHrAq2YirQ");
  background-size: 1350px 700px;
  background-repeat: no-repeat;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>
  <blink>NUTRITION DOSSIER</blink>
</h1>
<form>
<center>
  <font face="verdana" size="03" style="color:darkGreen" text="bold">Enter Food keyword: <input type="text" name="food" id="txtFood"></b>
</center><br /></font>
<center><button id="btnGetNutrition" class=b tnGetNutrition type="button" value='Get Nutrition Data'>Get Food Details</button></center><br/><br/>

<center>
  <font face="verdana" size="03" color="Brown">Search Results are below:</font>
</center>

</form>


<div id="resultDiv">
</div>
<br/>

＆＃13;

Answer 2

将您的逻辑移动到单独的函数中（让我们成为getFoodDetails）。在click事件和按键事件中调用它：

$('#btnGetNutrition').click(function () {
    getFoodDetails();
});

$('#txtFood').on("keypress", function(e) {
        if (e.keyCode == 13) {      
    getFoodDetails();            
    return false; 
    }
});

Note: remove this code $('input[name = btnGetNutrition]').click();

触发输入密钥

2 个答案: