Почему это не добавляет класс так, как я ожидаю?

Question

У меня есть проект Meteor, и я использую интерфейс Materialize. Я хотел, чтобы изменить внешний вид модальностей, добавив уникальную рамку вокруг них, так что я узнал, что класс материализовать был для модальностей и добавил некоторые CSS

.materialize-modal { 
padding: 1em; 
border: 1em solid transparent; 
background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red 0, red 12.5%, white 0, white 25%, #58a 0, #58a 37.5%, white 0, white 50%) 0/5em 5em; 
} 

Но это, конечно, меняет все модальности. Я намерен использовать это только на некоторых из них. Поэтому я подумал, что если я добавил класс, когда модальный срабатывают (модальный, где я не хочу специальную границы), я мог бы просто добавить класс при срабатывании:

$('.materialize-modal').addClass('plain'); 

и теперь с помощью CSS:

.materialize-modal:not(.plain) { 
padding: 1em; 
border: 1em solid transparent; 
background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red 0, red 12.5%, white 0, white 25%, #58a 0, #58a 37.5%, white 0, white 50%) 0/5em 5em; 
} 

Не повезло. Я бы предположил, что использование «addClass» не добавляет класс так, как я себе представляю; возможно, он ищет «простой» класс и пытается применить к нему CSS. В классе «plain» нет связанных с ним CSS. Это просто для предотвращения границ некоторых модалов с мыслью, что селектор «: not» увидит добавленный класс. Любой способ сделать это?

Answer 1

Скорее всего, вы применили класс Css к неправильному элементу, или jQuery не может найти элемент, и поэтому он не был добавлен к нему.

Убедитесь, что JQuery можно найти элемент

console.log($('.materialize-modal').length); //If 0 then it can't find the element 

Если длина 0 Вы, возможно, потребуется вызвать код внутри setTimeout(function() {},0); Если длина 1 и до сих пор существует проблема.

Используйте инструменты hrome Dev (f12) и проверьте модальность, чтобы проверить класс на самом деле на модальном.

Если класс на модальный то CSS является вопрос, вы, возможно, потребуется изменить CSS для:

.materialize-modal:not(.plain) .modal-dialog { 
    padding: 1em; 
    border: 1em solid transparent; 
    background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red 0, red 12.5%, white 0, white 25%, #58a 0, #58a 37.5%, white 0, white 50%) 0/5em 5em; 
    }