jquery - 使用变量使用 .css 设置 div 位置

Question

我有一个桥牌教学网站，其中包含纸牌游戏选项:

<a href="http://bridgeplays.com/test100.html">bridgeplays.com/test100.html</a>`

我很满意。但是，我希望减少我制作的每个新游戏的设置时间。对于每场比赛，我必须为每张牌放置 52 个 div，我对黑桃 A 执行以下操作。

CSS:

#SA{
    position: absolute;
    left: 180px;
    top: 250px;
    z-index: 1;
}

HTML:

<div class = "card" id = "SA">
    <img src = "http://www.bridgeplays.com /images/SA.png">
</div>

我希望能够减少更改每张卡片的 CSS left 和 top 参数所花费的时间。每张卡有 52 个位置要分配到。我希望能够将 left 和 top 的每个组合分配给一个变量，该变量可用于可能通过 $("#SA").CSS----- 设置卡片位置陈述。我已经尝试了以下但它不起作用。

var SAPos= " left:380px,top:250px ";
$("#SA").css({SAPos);

我尝试了几种定义 SAPos 的组合，但都没有成功。

Answer 1

首先，属性和值不能用空格隔开:

 <div class="card" id="SA">
     <img src="http://www.bridgeplays.com /images/SA.png">
  </div>

其次，.css() 函数需要两个花括号:

var SAPos= " left:380px,top:250px ";

$("#SA").css({SAPos});

编辑您可以使用一个对象来存储变量:

var SAPos = {
  'left' : '380px',
  'top' : '250px'
}
$("#SA").css(SAPos);