我有 4 个箭头,每个箭头都移动棋子元素 现在我想创建一个重置按钮,将片段返回到默认位置
//piece object
var piece = {};
piece.el = $('#piece');
piece.moveDelta = function(dx, dy){
var pos = this.el.position();
this.el.css('left', pos.left+dx);
this.el.css('top', pos.top+dy);
};
$(document).ready(function(){
//init deltas
$('#btn-up').data('dx', 0).data('dy', -100);
$('#btn-left').data('dx', -100).data('dy', 0);
$('#btn-right').data('dx', 100).data('dy', 0);
$('#btn-down').data('dx', 0).data('dy', 100);
//assign click event
$('.btn-arrow').click(function(){
piece.moveDelta($(this).data('dx'), $(this).data('dy'));
});
});
最佳答案
//piece object
var piece = {};
var defaultX = null;
var defaultY = null;
piece.el = $('#piece');
piece.moveDelta = function(dx, dy){
var pos = this.el.position();
if(defaultX === null && defaultY === null ){
defaultX = pos.left;
defaultY = pos.top;
}
this.el.css('left', pos.left+dx);
this.el.css('top', pos.top+dy);
};
piece.reset = function () {
this.el.css('left', defaultX);
this.el.css('top', defaultY);
};
$(document).ready(function(){
//init deltas
$('#btn-up').data('dx', 0).data('dy', -100);
$('#btn-left').data('dx', -100).data('dy', 0);
$('#btn-right').data('dx', 100).data('dy', 0);
$('#btn-down').data('dx', 0).data('dy', 100);
//assign click event
$('.btn-arrow').click(function(){
piece.moveDelta($(this).data('dx'), $(this).data('dy'));
});
$("#btn-reset").click(function(){
piece.reset();
});
});
您可以使用上面定义的reset
方法。 Fiddle
关于javascript - 将类元素恢复为默认值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12940977/