jQuery - Выполнение добавления атрибутов элемента

Question

Я пытаюсь выполнить добавление 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 получает все значения и процессы, добавляя стоимость и калорийность, но добавив, что это будет быстрее для первоначального ответа, что сделает сайт «казаться» быстрее.

Является ли это безумным поручением?

Answer 1

вы можете сделать что-то вроде

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(); 
     }); 
    } 
});