丢弃三个物体后触发图像更改

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选择器解决了这个问题。