点击一个按钮后,我想在现有的 div 中添加一个包含对象属性名称值的 p 标签。
这是我所说的div的一个示例。
所以,基本上,当点击一个按钮时,我希望能够使用类(即Mango)将其与foodLoads对象中同名(即mango)的属性匹配,将该属性的值放入p标签中,并添加到具有相同类(Mango)的div中。
这是我试图使用的jQuery。由于我对jQuery很陌生,所以我确定语法都弄错了。
有任何想法?提前谢谢 :)
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,
strawberry: 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
}
当用户勾选复选框时(在点击按钮之前),动态创建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 + '');
})
这是我所说的div的一个示例。
<ul class="food-list">
<div class="active Mango">
<li>Mango</li>
<select class="serving-size"><option value="1">1</option><optionvalue="2">2</option><option value="3">3</option><option value="4">4</option>
</select>
</div>
</ul>
所以,基本上,当点击一个按钮时,我希望能够使用类(即Mango)将其与foodLoads对象中同名(即mango)的属性匹配,将该属性的值放入p标签中,并添加到具有相同类(Mango)的div中。
这是我试图使用的jQuery。由于我对jQuery很陌生,所以我确定语法都弄错了。
$('.submit-items').click(function() {
$.each( foodLoads, function( key, value ) {
if ($('.active:contains(' + key + ')')) {
$(this).append('<p>' + key + '</li>');
}
})
})
有任何想法?提前谢谢 :)
Mango
- Edson