1

Есть блоки:

<div class="order-string-list">Текст 1</div>
<div class="order-string-list">Текст 2</div>
<div class="order-string-list">Текст 3</div>

Они загружаются асинхронно и могут добавляться или удаляться со страницы.

Есть кнопка:

<div class="open-new">Кнопка</div>

Которая меняет видимость данных блоков с помощью функции:

$("body").on("click", ".open-new", function(e) {
    $(".order-string-list").toggle();   
});

Но почему новые элементы не появляются с этим свойством? И как сделать так, чтобы свойства CSS распространялись также на новые объекты, то есть фактически происходило изменение в классе CSS, а не только в выбранных блоках с классом CSS?

Даже если поменять свойство, к примеру:

$(".order-string-list").css('background-color', 'red'); 

То существующие блоки окрасятся в красный, но новые не будут наследовать это свойство. Почему?

1
  • действительно любопытно... Обычно CSS к динамично созданным блокам применяется без проблем... А можно посмотреть код, который создает эти новые блоки?
    – cyadvert
    Commented 20 окт. 2015 в 5:40

1 ответ 1

4

$(".order-string-list").css('background-color','red');

Проблема в том, что используя метод css, вы прописываете стиль прямо в элемент ( если коллекция, то в каждый элемент коллекции ) это называется inline стиль и он распространяется только на элемент где прописан и его потомков. В вашем случае, можно сделать так

HTML

<div class='parent'>
   <!-- тут ваши дивы -->
   <div class="order-string-list"> Текст1 </div>
   <div class="order-string-list"> Текст2 </div>
   <div class="order-string-list"> Текст3 </div>
</div>

CSS

.parent .order-string-list{
    /* стили для неактивных .order-string-list */
}
.parent.active .order-string-list {
    /* стили для активных .order-string-list */
}

Скрипт

$("body").on("click", ".open-new", function(e) {
    $(".parent").toggleClass("active");   
});

Преимущество в том, что .parent хранит состояние, а не каждый отдельный ordero-string-list, что облегчает контроль.

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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.