Как получить класс CSS, чтобы показать на экране несколько раз

Question

Так что, если у меня есть спрайт, определенный следующий код CSS:

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

я могу отобразить его на экране в каком бы положение я хочу, используя следующий Код jquery:

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

Мой вопрос: как я могу отображать его несколько раз на одном экране? Я думаю, что мне нужно изменить его на .attack, но точно не знаю, как это работает, если кто-то может помочь

Answer 1

Когда вы используете #attack, вы назначаете стили идентификатору элемента. Это означает, что на странице есть только один элемент. например

<div id="attack"></div> 

Если вы хотите использовать его в нескольких местах, вы должны использовать класс. поэтому синтаксис на ваш CSS будет .attack и в элементе (ы) это будет выглядеть следующим образом:

<div class="attack"></div> 

Answer 2

#attack не на самом деле класс CSS; это идентификатор. Классы идентифицируются остановкой .class, тогда как идентификаторы идентифицируются символом хэштега #id.

ID уникальны и неповторимы, в то время как вы можете иметь неограниченные элементы с тем же классом.

Если вы хотите применить один и тот же стиль к различным элементам, вы должны использовать класс.

Answer 3

Если вы планируете отображать несколько элементов, то вам нужно будет установить его как класс вместо id, как говорили другие ответы. Используйте .attack вместо #attack.

Но, если вы .attack, то вы не можете использовать свой код JQuery поместить эти несколько экземпляров, потому что .attack подберет все элементов с class="attack", а затем переместить их все в одном месте.

Что вы хотите, так это иметь идентификаторы идентификатора класса И. Так, что-то вроде:

<div class="attack" id="attackOne"></div> 
<div class="attack" id="attackTwo"></div> 

Теперь, если вы хотите динамически создавать эти элементы с JQuery, вы можете использовать функцию clone(). Так, например, для создания второй DIV из первых, вы можете сделать:

$(".attack").clone().attr('id', "attackTwo").appendTo(//wherever you want); 

После этого, вы можете использовать селектор ID #attackTwo положение и использовать JQuery на только что один элемент.

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

Answer 4

Используйте следующую JS:

$div =$(".attack"); 
    $div.clone(true).appendTo('body').css('left','480px'); 
    $div.clone(true).appendTo('body').css('left','700px'); 

$div просто держит выбор div с классом (не ID) attack. Вы должны clonediv и добавьте его в body, а затем переместите его в любую позицию, которая вам нравится.