点击使用jQuery用HTML更新DIV

Updating a DIV with HTML using jQuery on click

本文关键字：更新 DIV HTML jQuery      更新时间：2023-09-26

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

基本上，我有一系列的配料，它们可以拖到搅拌碗上，然后出现在黑板上，配料逐渐消失，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' });
     }
 });

它似乎不想启动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+"|";
 }

它也不会淡出罐子（可能是因为它超出了范围？）。

有人能帮忙吗？

Simon

变量ui是drop处理程序中的一个参数，因此在调用它时它超出了范围。这会阻止drawIngredients（）函数被调用。

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

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

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

然后稍后使用：

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

这样，您可以查看父<李>当您调用对话框并将其保存以供配料添加例程稍后使用时。

相关文章：