Question

我有一个我创造的功能来展示水果和蔬菜。该函数应该同时返回几个元素，但我仍然试图返回值。我的代码是：

有人能看到我的功能中的错误吗？

function fetchDetails() {
  var x = document.getElementById("food").value;
  var str = ""
  for (var color of colors) {
    str += "<option>" + item + "</option>"
  };
  var foodtype = {
    Apple || Orange || Banana: {
      foodname: 'Fruit',
      img: 'http://example.com/fruit.jpg',
      foodshort: "FRU",
      colors: ["Red", "Orange", "Green"]
    },
    Eggplants || Cucumber || Spinach: {
      foodname: 'Vegetable',
      img: 'http://example.com/vegetable.jpg',
      foodshort: "VEG",
      colors: ["Green", "Purple", "Red"]
    },
  };
  var f = foodtype[x];
  document.getElementById("foodname").innerHTML = f && f.foodname;
  document.getElementById("img").src = f && f.img;
  document.getElementById("foodshort").value = f && f.foodshort;
  document.getElementById("colors").innerHTML = str;
}

<input type="text" id="food" onkeyup="fetchDetails()">
<p id="foodname"></p>
<img id="img"></img>
<input type="text" id="foodshort">
<select id="colors"></select>

提前致谢！

Answer 1

要达到预期的效果，请使用下面提到的JSON格式并循环遍历数组并使用颜色对象和图像显示

var foodtype = [{
item:['Apple', 'Orange','Banana'], 
foodname: 'Fruit',
img: 'https://www.w3schools.com/w3css/img_lights.jpg',
foodshort: "FRU",
colors : ["Red", "Orange", "Green"]
},
 {
item:['Eggplants' , 'Cucumber' , 'Spinach'],
foodname: 'Vegetable',
img: 'https://www.w3schools.com/w3css/img_forest.jpg',
foodshort: "VEG",
colors : ["Green", "Purple", "Red"]
},
];

代码示例 - https://codepen.io/nagasai/pen/qxedOP

JS：

function fetchDetails() {
var x = document.getElementById("food").value;

var foodtype = [{
item:['Apple', 'Orange','Banana'], 
foodname: 'Fruit',
img: 'https://www.w3schools.com/w3css/img_lights.jpg',
foodshort: "FRU",
colors : ["Red", "Orange", "Green"]
},
 {
item:['Eggplants' , 'Cucumber' , 'Spinach'],
foodname: 'Vegetable',
img: 'https://www.w3schools.com/w3css/img_forest.jpg',
foodshort: "VEG",
colors : ["Green", "Purple", "Red"]
},
];

for(var i =0; i < foodtype.length; i++){
   if(foodtype[i].item.indexOf(x) != -1){
     var f = foodtype[i];
document.getElementById("foodname").innerHTML = f && f.foodname;
document.getElementById("img").src = f && f.img;
document.getElementById("foodshort").value = f && f.foodshort;
var str = ""
for (var color of f.colors) {
str += "<option>" + color + "</option>"
};
document.getElementById("colors").innerHTML = str;
   }
}

}

Answer 2

我认为你必须修复你的对象表示法我会把你的＆＃34; foodtype＆＃34;和＆＃34; foodname＆＃34;因为苹果不是食物类型，而是食物名称，它们似乎被颠倒了！我会建议一个帮助程序来生成一个具有正确表示法的对象数组，这样你就不会混淆看看我为类似工作流程所做的旧笔here

needs code to link to code pen

Answer 3

好吧，如果你可以将你的对象改成类似的东西，

<html>

<body><input type="text" id="food" onkeyup="fetchDetails()" value="Apple">
<p id="foodname"></p>
<img id="img"></img>
<input type="text" id="foodshort">
<select id="colors"></select>

<script>
function fetchDetails() {
  var x = document.getElementById("food").value;
  var str = ""
  for (var color of colors) {
    str += "<option>" + item + "</option>";
  };

  var foodtype = {
  Apple : {
      foodname: 'Fruit',
      img: 'http://example.com/fruit.jpg',
      foodshort: "FRU",
      colors : ["Red", "Orange", "Green"]
    },
     Orange:{
      foodname: 'Fruit',
      img: 'http://example.com/fruit.jpg',
      foodshort: "FRU",
      colors : ["Red", "Orange", "Green"]
    },
     Banana:{
      foodname: 'Fruit',
      img: 'http://example.com/fruit.jpg',
      foodshort: "FRU",
      colors : ["Red", "Orange", "Green"]
    },
    Eggplants : {
      foodname: 'Vegetable',
      img: 'http://example.com/vegetable.jpg',
      foodshort: "VEG",
      colors : ["Green", "Purple", "Red"]
    },
    Cucumber : {
      foodname: 'Vegetable',
      img: 'http://example.com/vegetable.jpg',
      foodshort: "VEG",
      colors : ["Green", "Purple", "Red"]
    },
    Spinach: {
      foodname: 'Vegetable',
      img: 'http://example.com/vegetable.jpg',
      foodshort: "VEG",
      colors : ["Green", "Purple", "Red"]
    }
  };

  f = foodtype[x];
  console.log(f);
  document.getElementById("foodname").innerHTML = f && f.foodname;
  document.getElementById("img").src = f && f.img;
  document.getElementById("foodshort").value = f && f.foodshort;
  document.getElementById("colors").innerHTML = str;
}
fetchDetails();
</script>


</body>
</html>

它应该可以工作，或者如果你想采用你的方法，你可以使用这个扩展功能

function expand(obj) {
    var keys = Object.keys(obj);
    for (var i = 0; i < keys.length; ++i) {
        var key = keys[i],
            subkeys = key.split(/,\s?/),
            target = obj[key];
        delete obj[key];
        subkeys.forEach(function(key) { obj[key] = target; })
    }
    return obj;
}
  var foodtype = {
  'Apple, Orange, Banana' : {
  foodname: 'Fruit',
  img: 'http://example.com/fruit.jpg',
  foodshort: "FRU",
  colors : ["Red", "Orange", "Green"]
},

'Eggplants, Cucumber, Spinach' : {
  foodname: 'Vegetable',
  img: 'http://example.com/vegetable.jpg',
  foodshort: "VEG",
  colors : ["Green", "Purple", "Red"]
}

};

  var expanded = expand(foodtype);

  f = expanded[x];
  console.log(f);
  document.getElementById("foodname").innerHTML = f && f.foodname;
  document.getElementById("img").src = f && f.img;
  document.getElementById("foodshort").value = f && f.foodshort;
  document.getElementById("colors").innerHTML = str;

一次Javascript多个动作

3 个答案: