javascript - 单击时使用 jQuery 使用 HTML 更新 DIV

Question

我的网站遇到了烦人的问题，需要修复!

基本上，我有一系列成分，可以将它们拖到搅拌碗上，然后它们出现在黑板上，成分淡出并更新 URL。

一切都很好!

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

You can see it in action here .

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

要查看此操作，只需单击架子上的一个 jar ，您就会明白我的意思!

因此，在代码中，有问题的代码片段是这样的:

$(".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' });
     }
 });

它似乎不想触发drawIngredients 函数。看起来像这样:

//Function to redraw the ingredients list
function drawIngredients(){
    //alert("I'm going to draw me a list!");//#DEBUG

    //alert(ingredients);//#DEBUG

    //Clear down the ingredients div and querystring
    $('#ingredient_list').html('');
    ingString = "";

    //Get the URL
    var _href = $("a.to_step_4").attr("href");

    //Split the URL
    var _hrefs = _href.split("&");

    //alert(_href);//#DEBUG
    //alert(_hrefs);//#DEBUG

    //Add each ingredient into the div
    ingredients.forEach( drawIngredient );

    //Set the flavour part of the querystring;
    _hrefs[2] = "flavour="+ingString;

    //alert(_hrefs[2]);//#DEBUG

    var _href = _hrefs[0]+"&"+_hrefs[1]+"&"+_hrefs[2];

    $("a.to_step_4").attr("href", _href);
 }

 function drawIngredient( elem, index ){
    $('#ingredient_list').append('<p class="choc_ingredient '+index+'">'+elem+'</p>');
    ingString += elem+"|";
 }

它也不会消失 jar (可能是因为它超出了范围？)。

有人可以帮忙吗？

西蒙

Answer 1

变量 ui 是放置处理程序中的一个参数，因此它超出了您调用它的范围。这会阻止调用 drawIngredients() 函数。

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

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

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

然后使用:

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

这样，当您调用对话框时，您可以查看父

上的数据成分，并将其保存以供成分添加例程稍后使用。