使用jQuery點擊更新DIV點擊

討厭的問題我在這裏有一個網站，我需要修復！使用jQuery點擊更新DIV點擊

基本上，我有一系列的成分可以拖到一個混合碗，然後他們出現在黑板上，成分淡出和URL更新。

這一切都很好！

我得到的問題是，我們提供了另一種方式的用戶添加配料到他們的攪拌碗，只需點擊一個「添加到碗」按鈕。

這種方法會更新「配料」數組ok，但它不會更新黑板，更新網址或淡化貨架上的罐子。

要看到這個工作，只需點擊貨架上的一個罐子，你會明白我的意思！

所以，在代碼中，有問題的片段是這樣的：

$(".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（可能是由於它超出了範圍？）。

任何人都可以幫忙嗎？

西蒙

來源

2014-09-18 Simon Hume

您注意到在使用此按鈕添加按鈕時出現錯誤「ui is not defined」：「ui.draggable.fadeOut（500）;」？ – 2014-09-18 21:47:33

我沒有發現，認爲它沒有發生。任何建議如何解決這個問題？ – 2014-09-18 21:50:41

變量UI是在降處理器的參數，所以它是超出範圍，在這裏您呼叫的地步。這阻止了drawIngredients（）函數被調用。

如果您需要淡出jar，則需要使用其他一些獲取當前選定jar的機制 - 將其存儲以供對話框稍後使用。

也許最好的方式就是儲存在罐子數據成分的屬性，如：

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

再後來使用：

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

這樣的話，你可以看一下數據當您調用對話框並將其保存以供成分添加例程稍後使用時，可以在父母<li>上成功。

來源

2014-09-18 21:58:55

乾杯克里斯，消除褪色幫助，現在我有我的黑板再次更新！只需破解褪色，我們應該是好的。謝謝您的幫助。非常感激。 – 2014-09-18 22:05:46

使用jQuery點擊更新DIV點擊

回答

相關問題