我正在尝试制作这样的营养标签:Example
目前我的数据库已经全部设置好了。我现在正在努力让它做一件事,然后再做其他事情。
我的数据库看起来像:
ingName: ....
fat: ...
carbs ... etc
我现在遇到的问题很大。在过去的 3 天里,我一直坚持使用它,似乎没有人知道出了什么问题。我创建了一个 ever div 交叉,以便用户可以删除他添加的成分。所以如果他们有:
Apple : 1g
Mango : 2g
Melon: 3g
Total : 6g
假设他们不再想要芒果,那么它应该看起来像:
Apple: 1g
Mango: 2g
Total: 3g
但是我无法让它工作。每次我点击十字架时,它都会删除所有内容,什么也不留下。
HTML:
<tr>
<th colspan="2">
<b>Total Fat</b>
<span id="fat">0.0</span>
</th>
<td>
<b>22%</b>
</td>
</tr>
<input type="text" name='search_term' id="search_term" class="searchFunction">
<input id="addButton" type="button" value="Add">
<div class="dropdown">
<ul class="result"></ul>
</div>
<div class="selectedStuff"></div>
我的实时站点:
http://diet.elementalbydesign.com/bootstrap-3.3.6-dist/build.php
编辑:现在你们看到伙计们,每次我删除一个 div 而不是我在数据库中设置的 ammount 时,它是如何只带走 -1 的吗?这是我遇到的问题的主要部分。
最佳答案
这就是您展示所选成分的方式吗?
"<div>" + searchedValue + "<span data-fat='"+data+"' data-itemfat='"+data+"'>X</span></div>"
首先修复从build.php
返回的数据, because for example, when Banana is selected, it returns <script>$(" #fat').html(3);<="" script="">4'
这就是它显示 4' data-itemfat='4'>X
的原因.确保它只返回 id
的成分!没有 HTML 元素或任何元素。
不确定 appendTo()
是显示数据的正确选择,但我建议您尝试 append()
.阅读更多关于差异的信息 here .我们将添加一个 class
<span>
的标签为了标记它们:
divHolder.append('<div style="background-color: yellow;
width: 700px;
margin-top: 10px;
border-style: solid;
border-color: #0000ff">' + searchedValue + '
<span data-fat="'+data+'" data-itemfat="'+data+'" class="ingredient">X</span>
</div>');
然后,您的脚本将去除成分:
$(document).on("click", ".ingredient", function(){
var curr_fat = parseInt($("#fat").html()), /* GET THE CURRENT FAT */
toberemovedfat = parseInt($(this).attr('data-fat')); /* GET THE FAT OF THE 'TO BE REMOVED' INGREDIENT */
curr_fat = curr_fat - toberemovedfat; /* GET THE DIFFERENCE */
$("#fat").html(curr_fat); /* DISPLAY THE NEW FAT */
$(this).remove(); /* REMOVE THE DISPLAY OF REMOVED INGREDIENT */
});
关于javascript - jQuery.remove() 删除错误的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36145605/