Javascript, can not subtract values ​​

Question

Привет, ребята, в основном я пытаюсь добавить данные на этикетке nutrtion, которую я создал. Поэтому ярлык это само есть все от жира, углеводов, белков и т.д. Теперь я создал базу данных с:

ingName: .... 
fat: ... 
carbs ... etc 

Так что сейчас я просто пытаюсь заставить его работать на жир. Как только я это сделаю, я могу легко сделать остальные. Я могу легко найти базу данных. Когда пользователь нажимает кнопку «Добавить», она добавит ингредиент под полем поиска, а затем изменит содержание жира. Однако сейчас у меня возникают серьезные проблемы.

Когда пользователь нажимает на красный крест, чтобы удалить элемент, я хочу, чтобы он вычитал жир этикетки. Поэтому, если пользователь добавляет яблоко с 1 жиром, а затем добавляет банан с 4 жирами. Затем пользователь решает удалить яблоко, он должен вернуться к 4 жирам из 5 жиров.

Answer 1

Вы, кажется, храните новый счетчик жира в каждом новом диапазоне, поэтому, если вы добавляете яблоки стоимостью 5, то вы создаете пролет с данными из 5, затем добавляете это на свой счетчик current_fat и при следующем добавлении другого элемент данных этого элемента теперь является накопительным. Я создал код в этом fiddle. Кажется, он работает так, как вы сейчас описываете.

Я знаю, что я говорю, может быть запутанным, поэтому взгляните на fiddle.

• Если добавить яблоки на сумму 5
• Затем добавить бананы на сумму 5
• Затем добавить зеленые бобы на сумму 5

Вы принимаете 5 из яблок и положить эти 5 очков в этом переменная называется current_fat, тогда вы добавляете значение точки для бананов, а затем значение точки для зеленых бобов, так что вы заканчиваете с диапазоном с яблоками в 5, бананами в 10 и зеленой фасолью в 15, поэтому, когда вы удаляете зеленый бобы, все ваши жиры снижаются до нуля, вместо этого вам нужно каждый элемент с собственным значением точки в пролете.

var current_fat = 0; 

$('#addButton').on('click', function(event) { 
    if ($('#search_term').val() == '') { 
    alert('please fill something in text box'); 
    } else { 
    var searchedValue = $('#search_term').val(); 
    temp = $("#fat").text(); 
    temp = parseInt(temp); 

    temp = $("#fat").text(); 
    temp = parseInt(temp); 

    current_fat += temp; 

    $("#fat").text(current_fat); 
    var divHolder = $('.selectedStuff'); 
    $("<div>" + searchedValue + "<span data-fat='" + temp + "'>X</span></div>").css({ 
     'background-color': 'yellow', 
     'width': '700px', 
     'margin-top': '10px', 
     'border-style': 'solid', 
     'border-color': '#0000ff' 
    }).appendTo(divHolder); 
    } 


    $('.selectedStuff span').on("click", function() { 
    var fat = Number($(this).data('fat')); 
    alert(fat); 
    $('#fat').text(Number($('#fat').text()) - fat); 
    $(this).parent().remove(); 
    }); 
}); 

Answer 2

Вы можете вычитать и показать значения, введя одну временную переменную. Пожалуйста, найдите рабочий пример.

var current_fat = 0; 
 
$(document).ready(function(){ 
 
    $('.searchFunction').keyup(function(event) { 
 
      if(event.keyCode != 8 && event.keyCode != 46) { 
 
       var search_term = $("#search_term").val(); 
 
       if(search_term != '') { 
 
        $.get('build.php', { search_term:search_term }, function(data) { 
 
        $('.result').html(data);  
 
        }); 
 
       } 
 
      } 
 
     }); 
 

 
     $('.result').on('click', 'li', function(event) { 
 
      var result_value = $(this).text(); 
 
      $('#search_term').val(result_value); 
 
      $('.result').html(''); 
 
     }); 
 

 
     $('#addButton').on('click', function(event) { 
 
      if($('#search_term').val() ==''){ 
 
       alert('please fill something in text box'); 
 
      }else{ 
 
        var searchedValue = $('#search_term').val(); 
 
        temp = $("#fat").text(); 
 
        temp = parseInt(temp); 
 
        $.post('build.php', { 'search_term':searchedValue, 'current_fat':temp }, function(data) { 
 
\t \t \t \t  
 
         $('.result').html(data); 
 
        
 
\t \t \t \t }); 
 
       \t temp = $("#fat").val(); 
 
\t \t \t \t  temp = parseInt(temp); 
 
\t \t \t \t \t current_fat += temp; 
 
\t \t \t \t \t $("#fat").val(current_fat); 
 
       
 
\t \t \t \t var divHolder = $('.selectedStuff'); 
 
\t \t \t \t \t $("<div>" + searchedValue + "<span data-fat='"+current_fat+"' data-itemfat='"+temp+"'>X</span></div>").css({ 
 
\t \t \t \t \t \t \t \t 'background-color': 'yellow', 
 
\t \t \t \t \t \t \t \t 'width': '700px', 
 
\t \t \t \t \t \t \t \t 'margin-top': '10px', 
 
\t \t \t \t \t \t \t \t 'border-style': 'solid', 
 
\t \t \t \t \t \t \t \t 'border-color': '#0000ff' 
 
\t \t \t \t \t \t \t }).appendTo(divHolder); 
 
\t \t \t \t } 
 

 
\t \t \t $('.selectedStuff span').on("click", function(){ 
 
\t \t \t \t var totalfat = Number($(this).data('fat')); 
 
\t \t \t \t var fat = Number($(this).data('itemfat')); 
 
\t \t \t \t $('#fat').val(totalfat-fat); 
 
\t \t \t \t $(this).parent().remove(); 
 
\t \t \t }); 
 
     }); 
 
});

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
<div> Search Term :&nbsp;<input type="text" id="search_term" />&nbsp; FAT: &nbsp;<input type="text" id="fat" /> <input type="button" id="addButton" value="add" /></div> 
 
<div class="selectedStuff"></div> 
 
    </body> 
 
    </html>