Javascript 在单击时使用jQuery用HTML更新DIV

我在这里遇到了一个烦人的问题，我需要修复它

基本上，我有一系列的配料，可以拖到搅拌碗上，然后它们出现在黑板上，配料消失，URL更新

这一切都很好

我遇到的问题是，我们为用户提供了另一种向搅拌碗添加配料的方法，只需单击“添加到碗”按钮

这个方法将更新“配料”数组，但不会更新黑板、更新URL或淡出架子上的罐子

要想看到这一点，只需点击架子上的一个罐子，你就会明白我的意思了

因此，在代码中，有问题的代码片段如下：

$(".ingredients_add").click(function () {

     // hide the ingredient box
     //$("#ingredients_box").toggleClass("hidden");
     $("#ingredients_box").toggleClass("visible");

     if( ingredients.length <= 4 ){

        // get the topping name
         var htmlString = $("#ingredients_box > .ingredients_name_label").text();
         $('.choc2_flavour').text(htmlString);

         //Add item to the array
         ingredients.push( htmlString );

         // test alert to check array is populating
         //alert(ingredients);

         // fade out jar --------- we need this to fade out the ingredient jar that has been added. Out of scope??
         ui.draggable.fadeOut(500);

         //Output the ingredients array -------- this isn't firing and updating the blackboard
         drawIngredients();

     } else {
         //Maybe show an alert here? The ingredient will revert automagically...

        alert("You've already added the maximum number of ingredients!");

        //ui.draggable({ revert: 'invalid' });
     }
 });

$（“.components\u add”）。单击（函数（）{
//把配料盒藏起来
//$（“#配料盒”）。切换类别（“隐藏”）；
$（“#配料盒”）。切换类别（“可见”）；
如果（contracents.length变量ui是drop处理程序中的一个参数，那么它在您调用它的地方超出了范围。这将阻止调用drawIncoments（）函数

如果需要淡出jar，则需要使用其他一些机制来获取当前选定的jar—存储它以供对话框稍后使用

也许最好的方法是在jar上存储数据成分属性，例如：

<li class="drag_me_ingredients ui-draggable" 
    style="position: relative;" data-ingredient="blueberries">...</li>

这样，您可以在调用对话框时查看父级
上的数据成分，并将其保存以供成分添加例程稍后使用。
您注意到，使用此行的按钮添加时出现错误“ui未定义”：“ui.Dragable.fadeOut（500）；”？我没有发现，我想这不会发生。有没有关于如何修复的建议？克里斯，干杯，移除褪色帮助了我，现在我的黑板又更新了！只需要破解褪色，我们应该很好。谢谢你的帮助。非常感谢。
<li class="drag_me_ingredients ui-draggable" 
    style="position: relative;" data-ingredient="blueberries">...</li>

 $('li[data-ingredient="' + ingredient + '"]').fadeOut(500);
 drawIngredients();