Question

嗨，大家好基本上我正在尝试在我构建的nutrtion标签中添加数据。所以它自己的标签包括脂肪，碳水化合物，蛋白质等等。现在我已经建立了一个数据库：

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

所以现在我只是想让它为胖子工作。一旦我这样做，我可以很容易地做其他人。我可以轻松搜索数据库。当用户按下“添加”按钮时，它会在搜索框下方添加成分，然后更改脂肪含量。但是我现在遇到了一个重大问题。

当用户点击红叉以删除该元素时，我希望它减去标签的脂肪。因此，如果用户添加1脂肪的苹果，然后添加4脂肪的香蕉。然后用户决定删除它应该从5脂肪中恢复4脂肪的苹果。

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) { 
				   
                       $('.result').html( data ); 
                   
				   }); 
                	temp = $("#fat").val(); 
				    temp = parseInt(temp); 
					current_fat += temp; 
					$("#fat").val(current_fat);
                
				var divHolder = $('.selectedStuff');
					$("<div>" + searchedValue + "<span data-fat='"+current_fat+"' data-itemfat='"+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 totalfat = Number($(this).data('fat')); 
				var fat = Number($(this).data('itemfat')); 
				$('#fat').val(totalfat-fat);
				$(this).parent().remove();  
			});
        });
});

<!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>

Javascript，不能减去值

2 个答案: