正在重置位置使用CSS

Question

我有這樣的代碼中CSS：

#blueToken 
{ 
    top:415px; 
    left:35px; 
    z-index: 80; 
} 

#redToken 
{ 
    top:405px; 
    left:25px; 
    z-index: 70; 
} 

完成一場比賽後，一個令牌是在「終點線」，另一種可能是在屏幕上的任何位置。 我想單擊一個按鈕後重置兩個位置。 （我使用JS與jQuery）。 謝謝！

Answer 1

假設起始位置是相同的CSS代碼，你有一個類名btn-reset按鈕復位位置。

$('.btn-reset').click(function() { 
    $('#blueToken').css({ 
     top: 415, 
     left: 35, 
     'z-index': 80 
    }); 
    $('#redToken').css({ 
     top: 415, 
     left: 25, 
     'z-index': 70 
    }); 
}); 

Answer 2

你應該使用position property與top, left or z-index property

還可以使用類此，像

.blueToken 
{ 
    top:415px; 
    left:35px; 
    z-index: 80; 
    position:relative; 
} 

.redToken 
{ 
    top:405px; 
    left:25px; 
    z-index: 70; 
    position:relative; 
} 

而且使用jquery.toggleClass()爲add or remove class。

這code可以幫助你，

$('.btn-reset').click(function() { 
    $(this).toggleClass('blueToken redToken'); 
});