丟棄三個物體後觸發圖像更改

Question

將最上面三個框放入汽車後，我想更改汽車圖像。

有沒有人知道一種方式，我可以指定後，所有的箱子被丟棄它觸發一個事件來改變汽車圖像？

汽車圖像

 <div id="car"> 
<img name="car" src="http://www.danconveys.com/wp-content/uploads/2014/04/car-complete_1.png" width="440" height="154" alt=""> 
</div> 

#car { 
position:absolute; 
left:46px; 
top:160px; 
width:430px; 
height:128px; 
z-index:7; 
} 

這裏的HTML代碼是我想將其更改爲圖像： http://www.danconveys.com/wp-content/uploads/2014/04/car_break.png

JS小提琴：http://jsfiddle.net/dantest2014/9JTSQ/12/

希望有人能幫助！ 非常感謝， 丹

Answer 1

您的JSFiddle看起來幾乎是正確的。你仍然需要做的兩件事情是（1）計算丟棄的盒子數量，（2）觸發新的圖像。

只是一個計數器添加到您的drop功能：

var NUM_BOXES = 4, 
    dropped = 0; 
function drop (event, ui) { 
    if (++dropped === NUM_BOXES) { 
     $('#car > img').attr('src', '.../car_break.png'); 
    } 
} 

一件事，可能是在你當前的jsfiddle一個錯字，你設置的#car的src屬性，但圖像是內那元件。我已經用上面的#car > img選擇器解決了這個問題。