Fatal编程技术网
  • jquery/
  • Jquery 从对象中获取名称-值对？

Jquery 从对象中获取名称-值对？

jquery object dom syntax

Jquery 从对象中获取名称-值对？,jquery,object,dom,syntax,Jquery,Object,Dom,Syntax,我有一个目标 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,

我有一个目标

  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>');  

})

var foodLoads={
橙色：6.7，
苹果：5.6，
香蕉：12.7，
葡萄：16.3，
桃子：2.7，
梨：6.5，
芒果：16.1，
蓝莓：9.3，
葡萄柚：1.7，
草莓：3.5，
橘子：3.1，
西瓜：8，
鸭子：0，
牛肉:0,，
鸡:0,，
火腿：0，
土耳其：0，
麋鹿：0，
猪肉:0,，
鱼：0，
蛋：0，
兰姆：0，
应用指南：11.8，
红莓汁：23.3，
橙色指南：14.4，
胡萝卜汁：8.6，
柠檬水：24.3，
热巧克力混合物：10.2，
番茄汁：3.5，
巧克力牛奶：13.3，
杏仁奶：0.02，
豆浆：4，
全麦面包：6.1，
白面包：10.7，
百吉饼：30，
华夫饼干：13.8，
煎饼：5.3，
牛角面包：12.2，
松饼：28.8，
英语muffin:21.3，
甜甜圈：15.2，
燕麦粥：12.6，
藜麦：20.4，
全麦面包：7.1
}
$（'.submit items'）。在（'单击'，函数（）上）{
变量类型=$（'.food list.active li'）；
var foodName=$（类型）.text（）；
var值=食物加载[foodName]；
$（type）.parent（）.append（''+value+'
'）；
})
在上面的点击功能中，我主要想做的是：

  • 获取名称与“foodName”变量中的文本匹配的属性（从foodLoads对象）
  • 将该属性的值放在段落中
  • 将该段落附加到“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>

      

    • 橙色的
      • 
1.
2.
3.
4.

    

      

    • 橙色的
      • 
1.
2.
3.
4.

    

      

    • 橙色的
      • 
1.
2.
3.
4.
    *
    中的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 + '');

    $（'input'）。在（'ifChecked'，函数（事件）{
var liText=$（this.parent（）.parent（）.text（）；
var wrappedUp=$（'
  • '+liText+'
    • 1234'）；
$（'.food list'）。追加（wrappedUp）；
$（wrappedUp）.addClass（“”+liText+“”）；
    *从我所做的测试中，我发现除了“value”变量外，其他一切都正常工作

    这使我提出一个问题：

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

    非常感谢您的帮助：）

    现在您已经包含了HTML，这里有几个问题

  • 的直接父项必须是
    、
      或
      标记。因此，您的HTML不合法。请参阅：
      
HTML
      • 元素（或HTML列表项元素）用于表示
列表中的一项。它必须包含在父元素中：一个
有序列表（
      ）、无序列表（
      ）或菜单（
      ）
      
然后，一旦您在jQuery中修复了它和相应的选择器，您的表查找可能就无法工作了，因为您的HTML中有一个前导空格
      

      <li> orange</li>

      

      您还必须确保没有超过一个与
      .active
      匹配的
      • ，因为如果有，则
      .text（）
      将从它们中获取文本并将其连接起来，这也将与对象中的任何键都不匹配。
      现在您已经包含了HTML，这里有几个问题
      

    • 的直接父项必须是
      、
        或
        标记。因此，您的HTML不合法。请参阅：
        
HTML
        • 元素（或HTML列表项元素）用于表示
列表中的一项。它必须包含在父元素中：一个
有序列表（
        ）、无序列表（
        ）或菜单（
        ）
        
然后，一旦您在jQuery中修复了它和相应的选择器，您的表查找可能就无法工作了，因为您的HTML中有一个前导空格
        

        <li> orange</li>

        

        您还必须确保没有超过一个与
        .active
        匹配的
        • ，因为如果有，则
        .text（）
        将从两个对象中获取文本并将其连接起来，这也不会与对象中的任何键匹配。
        您请求值的方式是正确的。请检查您请求的食物名称。我猜，您的选择器（类型）可能不正确。顺便说一句，由于type是一个jQuery对象，您不需要将其包装到另一个选择器方法中，您可以使用type.text（）直接。如果
        value
        变量工作不正常，那么可能是因为
        foodName
        变量不正确，这可能是因为之前的jQuery不正确。我们需要查看此Javascript代码附带的HTML以了解问题所在。jQuery可能应该是
        var类型=$（'.food list li.active'）；
        ，但我们需要查看您的HTML才能确定。以下是一些与稍微固定版本的代码一起工作的HTML：。这表明，如果您拥有正确HTML的正确代码，则在表中查找文本的概念是有效的。呃，您不能将
      • 包装在
        中。这不是合法的HTML。如果
      • 父元素应该是
          或
          或
          。发件人：HTML
        • 元素（或HTML列表项元素）用于表示列表中的项目。它必须包含在父元素中：有序列表（）、无序列表（
            ）或菜单（）。为什么不向我们显示实际的HTML？我们可以停止猜测它的外观！您请求值的方式是正确的。请检查您请求的食物名称。我猜，您的选择器（类型）可能不正确。顺便说一句，由于类型是jQuery对象，您不需要将其包装到另一个选择器方法中，您可以使用type.text（）直接。如果您的
          •