将前三个盒子放到车上之后,我想改变汽车图像。
有没有人知道我可以在所有方框被删除后指定的方式触发事件来更改汽车图像?
汽车图片的HTML代码
<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;
}
以下是我希望将其更改为的图片: http://www.danconveys.com/wp-content/uploads/2014/04/car_break.png
JS小提琴:http://jsfiddle.net/dantest2014/9JTSQ/12/
希望有人可以提供帮助! 非常感谢, 丹
答案 0 :(得分:0)
你的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中可能存在拼写错误的一件事,您在src
上设置#car
属性,但图片里面该元素。我已经使用上面的#car > img
选择器解决了这个问题。