删除三个对象后触发图像更改

时间:2014-06-23 11:36:43

标签: javascript jquery javascript-events triggers drag-and-drop

将前三个盒子放到车上之后,我想改变汽车图像。

有没有人知道我可以在所有方框被删除后指定的方式触发事件来更改汽车图像?

汽车图片的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/

希望有人可以提供帮助! 非常感谢, 丹

1 个答案:

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