javascript - 使用 CSS 重置位置

Question

我在 CSS 中有这段代码：

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

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

完成一场比赛后，一个令牌在“终点线”上，另一个可以在屏幕上的任何位置。单击按钮后，我想重置两个位置。（我使用 JS 和 jQuery）。

Answer 1

你应该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');
});

Answer 2

假设起始位置与 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
   });
});