从对象获取名称-值对？

【问题标题】：Get name-value pair from object?从对象获取名称-值对？
【发布时间】：2016-03-26 23:20:41
【问题描述】：

我有一个对象

  var foodLoads = {
    orange: 6.7,
    apple: 5.6,
    banana: 12.7,
    grapes: 16.3,
    peach: 2.7,
    pear: 6.5,
    mango: 16.1,
    blueberries: 9.3,
    grapefruit: 1.7,
    strawberries: 3.5,
    tangerine: 3.1,
    watermelon: 8,
    duck: 0,
    beef: 0,
    chicken: 0,
    ham: 0,
    turkey: 0,
    elk: 0,
    pork: 0,
    fish: 0,
    eggs: 0,
    lamb: 0,
    applejuice: 11.8,
    cranberryjuice: 23.3,
    orangejuice: 14.4,
    carrotjuice: 8.6,
    lemonade: 24.3,
    hotchocolatemix: 10.2,
    tomatojuice: 3.5,
    chocolatemilk: 13.3,
    almondmilk: 0.02,
    soymilk: 4,
    wholewheatbread: 6.1,
    whitebread: 10.7,
    bagel: 30,
    waffle: 13.8,
    pancake: 5.3,
    croissant: 12.2,
    muffin: 28.8,
    englishmuffin: 21.3,
    doughnut: 15.2,
    oatmeal: 12.6,
    quinoa: 20.4,
    wholegrainbread: 7.1 
  }

$('.submit-items').on('click', function() {
    var type = $('.food-list .active li');
    var foodName = $(type).text();
    var value = foodLoads[foodName];
    $(type).parent().append('<p>' + value + '</p>');  

})

在上面的点击功能中，我实际上想要做的是：

1. 获取名称与“foodName”变量中的文本匹配的属性（来自 foodLoads 对象）
2. 将该属性的 VALUE 放在一个段落中
3. 将该段落附加到“type”变量的父级中。

下面是对应的 HTML：

<ul class="food-list">
   <div class="active orange">
      <li> orange</li>
      <select class="serving-size"><option value="1">1</option>
         <option value="2">2</option>
         <option value="3">3</option>
         <option value="4">4</option>
      </select>
   </div>
</ul>

<ul class="food-list">
   <div class="active eggs">
      <li> orange</li>
      <select class="serving-size"><option value="1">1</option>
         <option value="2">2</option>
         <option value="3">3</option>
         <option value="4">4</option>
      </select>
   </div>
</ul>

<ul class="food-list">
   <div class="active bagel">
      <li> orange</li>
      <select class="serving-size"><option value="1">1</option>
         <option value="2">2</option>
         <option value="3">3</option>
         <option value="4">4</option>
      </select>
   </div>
</ul>

*<ul> 中的 div 是在用户选中复选框时动态创建的。

 $('input').on('ifChecked', function(event) {       
    var liText = $(this).parent().parent().text();
    var wrappedUp = $('<div class="active"><li>' + liText + '</li><select class="serving-size"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select></div>');
    $('.food-list').append(wrappedUp);
    $(wrappedUp).addClass('' + liText + '');

*从我所做的测试中，我看到除了“值”变量之外一切正常。

这让我问这个问题：

该（“值”变量）是检索对象（foodLoads）中属性值的正确语法吗？

非常感谢您的帮助:)

【问题讨论】：

• 您要求值的方式是正确的。检查您要求的食物名称。我的猜测，您的选择器（类型）可能不正确。顺便说一句，由于type是一个jQuery对象，你不需要将它包装到另一个选择器方法中，你可以直接使用type.text()。
• 如果您的value 变量不能正常工作，那么可能是因为您的foodName 变量不正确，这可能是因为它之前的jQuery 不正确。我们需要查看这段 Javascript 代码附带的 HTML，才能知道问题出在哪里。
• 您的 jQuery 似乎应该是 var type = $('.food-list li.active');，但我们需要查看您的 HTML 才能确定。
• 这里有一些 HTML 可以使用稍微固定的代码版本：jsfiddle.net/jfriend00/2efhcgxp。这表明，如果您有正确的 HTML 代码，则在表格中查找文本的概念是有效的。
• 呃，你不能将<li> 包裹在<div> 中。那不是合法的 HTML。 <li> 父级应该是 <ul> 或 <ol> 或 <menu>。来自MDN：HTML
• 元素（或 HTML 列表项元素）用于表示列表中的一项。它必须包含在父元素中：有序列表 (
  )、无序列表 (
  ) 或菜单 (
  )
。你为什么不向我们展示实际的 HTML，我们可以停止猜测它的样子！