如何让CSS类多次显示在屏幕上

时间:2016-06-15 20:29:19

标签: jquery html css

所以如果我有一个由以下CSS代码定义的精灵:

#attack{
background-color: green;
width: 3px;
height: 10px;
position: absolute;
}

我可以使用以下Jquery代码在屏幕上的任何位置显示它:

$('#attack').css('left', X);
$('#attack').css('top', Y);

我的问题是如何在同一屏幕上多次显示?我想我必须把它改成.attack但不确定如果有人可以提供帮助的话究竟是如何工作的

4 个答案:

答案 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。

https://jsfiddle.net/sxq06kce/1/

答案 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,然后将其重新定位到您喜欢的任何位置。