所以如果我有一个由以下CSS代码定义的精灵:
#attack{
background-color: green;
width: 3px;
height: 10px;
position: absolute;
}
我可以使用以下Jquery代码在屏幕上的任何位置显示它:
$('#attack').css('left', X);
$('#attack').css('top', Y);
我的问题是如何在同一屏幕上多次显示?我想我必须把它改成.attack但不确定如果有人可以提供帮助的话究竟是如何工作的
答案 0 :(得分:2)
使用#attack
时,您将样式分配给元素ID。这意味着页面上只有一个元素。例如
<div id="attack"></div>
如果要在多个地方使用它,则应使用类。所以css上的语法是.attack
,而元素中的语法如下:
<div class="attack"></div>
答案 1 :(得分:0)
#attack
实际上不是一个css类;它是一个ID。类通过停靠.class
标识,而标识符由标记符号#id
标识。
ID是唯一且不可重复的,而您可以拥有具有相同类的无限元素。
如果要将相同的样式应用于不同的元素,则应使用class。
答案 2 :(得分:0)
如果您计划显示多个元素,那么您将希望将其设置为类而不是id,正如其他答案所述。使用.attack
代替#attack
。
但是,如果你执行.attack
,那么你就不能使用你的JQuery代码定位这些多个实例,因为.attack
将使用{{选择所有元素1}},然后将它们全部移动到同一位置。
你想要的是拥有类和id标识符。所以,像:
class="attack"
现在,如果您想使用JQuery动态创建这些元素,可以使用clone()
函数。因此,例如,要创建第一个div,您可以这样做:
<div class="attack" id="attackOne"></div>
<div class="attack" id="attackTwo"></div>
之后,您可以使用id选择器$(".attack").clone().attr('id', "attackTwo").appendTo(//wherever you want);
在该元素上定位和使用JQuery。
答案 3 :(得分:0)
使用以下JS:
$div =$(".attack");
$div.clone(true).appendTo('body').css('left','480px');
$div.clone(true).appendTo('body').css('left','700px');
$div
只保留div
与班级(非ID)attack
的选择。您必须clone div
并将其附加到body
,然后将其重新定位到您喜欢的任何位置。