Добавить класс CCS на основе переменной из пользовательской модели
У меня есть модель пользователя ниже:
const mongoose = require('mongoose');
const Schema = mongoose.Schema;
const passportLocalMongoose = require('passport-local-mongoose');
const ImageSchema = new Schema({
url: String,
filename: String
});
const UserSchema = new Schema({
email: {
type: String,
required: true,
unique: true
},
username: String,
dateofbirth:Date,
status: Boolean,
images: [ImageSchema],
},{ timestamps: true });
UserSchema.plugin(passportLocalMongoose);
module.exports = mongoose.model('User', UserSchema);
Я хочу обновить приведенный ниже CSS на основе значения статуса пользователя. Если Status = true, добавьте класс .test1; если Status = false, не добавляйте класс и оставьте поле пустым.
<div id = "statususername">
<h5 class = "btn-outline-secondary test1">Gold</h5>
</div>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я бы добавил файл javascript, который получает элемент с помощью document.querySelector('.my-class'), а затем добавляет или удаляет класс, например
let myEl = document.querySelector('.my-class');
if (status) {
myEl.classList.add("test1")
} else {
myEl.classList.remove("test1")
}
конечно, просто вставить это куда-нибудь не сработает, вам нужно при необходимости вызывать это как функцию и передавать статус, который вам нужно будет получить с сервера. другой вариант - рендеринг на стороне сервера, например, если вы используете EJS ( шаблонизатора) вы можете сгенерировать HTML, чтобы иметь или не иметь желаемый класс.
Документы EJS: Документы
Учебник EJS с узлом: Руководство
наконец, если бы вы использовали React, вы могли бы использовать состояние и тернарный оператор, но если вы достаточно далеко в проекте, довольно сложно переключиться на React без изрядных усилий, поэтому я бы рекомендовал захватить элемент с помощью javascript и установить classList в зависимости от переменной, полученной с сервера с помощью AJAX или с помощью механизма шаблонов
Используйте AJAX и интерфейс JS, если вам нужно обновить список классов в какой-то момент, а не просто устанавливать его один раз
Используйте механизм шаблонов, например EJS, если вам нужно добавить класс один раз при визуализации страницы.