2015-09-14 15 views
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檢索所有值並處理添加成本和熱量信息後返回值,但追加它會使初始響應更快,從而使網站「看起來」更快。

這是傻瓜的差事嗎?

回答

0

,你可以這樣做

var totalcalories; 
$("[name='calories']").each(function(){ 
    totalcalories = totalcalories + $(this).val(); 
}); 
在阿賈克斯的你的成功的功能

,讓你的Ajax功能將更新到

var totalcalories; 
$.ajax({ 
    url: "add-to-cart.php", 
    type: "POST", 
    dataType: "json", 
    data: {'id' : id, 'value' : value, 'cal' : cal }, 
    success: function() { 
     $("[name='calories']").each(function(){ 
      totalcalories = totalcalories + $(this).val(); 
     }); 
    } 
});