0
我試圖對附加項目做一些jquery添加,我想知道這是一個好主意,以及如何實現它。jQuery - 在元素屬性上執行加法
場景:
我生成了可以添加到項目的成分表。
<ul id="greens" class="card-content-ingredients" style="list-style-type: none;">
<?php foreach ($greens as $grn): ?>
<li value="<?php echo $grn['price']; ?>" id="<?php echo $grn['id']; ?>" cal="<?php echo $grn['nutritionix_cal']; ?>">
<input type="hidden" class="item_id" value="<?php echo $grn['id']; ?>" name="greens" />
<span class="item-name-small"><?php echo $grn['name']; ?></span>
<span class="item-description-menu"><?php echo $grn['description']; ?></span>
<span class="content-right"></span>
</li>
<?php endforeach; ?>
</ul>
每當客戶點擊的項目之一,我的項目追加到另一個DIV並執行一個AJAX調用服務器端的操作:
<script> <!-- Appending the DIV -->
$(function(){
$('ul.card-content-ingredients li').click(function(){
$('#scroll-2 ul').append($(this));
})
});
</script>
<script> <!-- AJAX -->
$(document).ready(function(){
$('ul.card-content-ingredients li').click(function(){
var id = $(this).attr('id');
var value = $(this).attr('value');
var cal= $(this).attr('cal');
$.ajax({
url: "add-to-cart.php",
type: "POST",
dataType: "json",
data: {'id' : id, 'value' : value, 'cal' : cal },
success: function() {}
});
});
});
</script>
什麼我不知道,是在追加步驟中,有沒有辦法讓我在輸入變量上執行加法?
如果我的DIV被寫成這樣:
<div class="pure-u-1 pure-u-md-3-5 pure-u-lg-3-5 content-left">
<div id="scroll-2" class="card">
<span class="is-center">
<?php echo substr($menu_item['name'], 0, -6); ?><br />
<?php echo CURRENCY . $menu_item['price'] . " - Cal: " . $menu_item['nutritionix_cal']; ?>
</span>
<ul style="list-style-type: none;">
</ul>
<input id="calories" type="text" value="0" size="1" name="calories" disabled>
</div> <!-- END CARD -->
</div> <!-- END RIGHT SIDE DISPLAY -->
因此,當元素添加到div從左側到右側,我怎麼可以執行除了cal
屬性添加到我的輸入方框Calories
?
目前,我在PHP檢索所有值並處理添加成本和熱量信息後返回值,但追加它會使初始響應更快,從而使網站「看起來」更快。
這是傻瓜的差事嗎?