Javascript 如何在wordpress上根据用户应用不同的样式表

我有一个Wordpress自托管网站，提供关于一系列书籍的额外内容。在不久的将来，我打算让用户声明他/她读过该系列中的哪本书——虽然这只是为了好玩，但我认为我可以进一步推广这一想法

问题是，由于一般页面上的某些内容可能会被认为是破坏者，如果他们没有读过一些书，我想根据登录的用户应用不同的样式表-因此，如果用户一直读到第2本书，样式表将以这样的方式加载，即任何带有“book3”类的段落或更高版本将自动转换为带有扰流板警告的隐藏段落。但是，如果用户已经阅读了第3册，则会加载不同的样式表；一个不会这样做，并会让用户正常看到的内容

---

我想这也可以用javascript实现，但我想CSS会更容易些？当然，我会根据这两种方法找到答案（包括关于javascript的jQuery）。

您可以在没有javascript的情况下实现这一点

实现这一点的一种方法是，如果用户阅读了某本特定的书，则向正文中添加一个额外的类。例如，如果用户已经阅读了book 1，您可能希望将类“read-book-1”添加到正文中。您可以在WordPress中使用

body\u类

过滤器完成此操作

下面是一个简单的示例：

add_filter('body_class', function($classes) {
    if(/* if user has read book 1 */) {
        $classes[] = 'read-book-1';
    }
    return $classes;
}

然后，假设您的标记如下所示：

<p class="spoiler book-1">...</p>

注意，我只是假设您使用的是

visibility:hidden隐藏扰流板文本。实现这一点的方法不止一种

如果您想加入其他功能，例如显示扰流板文本的链接，则需要javascript。如果您只想在悬停时显示扰流板文本，则只需使用css即可：

p.spoiler:hover {
    visibility:visible;
}

要根据Javascript变量加载不同的CSS文件，可以使用语句。每个案例都将用于在中写入。这需要在加载HTML主体之前完成，这样您就不会覆盖任何内容。链接到的MDN页面解释了此操作的详细信息

switch (variable) {
  case possibility1:
    document.write("<link rel='stylesheet' href='___.css' type='text/css'>");
    break;

  case possibility2: ...

  default: ...
}

开关（变量）{
案例可能性1：
文件。填写（“”）；
打破
案例可能性2:。。。
默认值：。。。
}

另一种选择是将类应用于扰流板。如果第2本书的内容会被破坏，并且您知道book2.hasRead===false，那么隐藏类将应用于该内容。使用和是想到的最简单的方法

使用类似的方法，即响应性设计如何在不同的情况下使用不同的CSS，也可以起到同样的作用，但我对这方面的了解还不够，无法建议如何做到这一点。
有趣的部分是获取用户读过这本书的信息。我考虑使用本教程（）来创建相关的用户字段，然后使用
get\u user\u meta（$current\u user->ID，'booksread'，'book-1'）
来代替您示例中已注释的
（如果用户已经阅读了第1本书）。这是否理想？
switch (variable) {
  case possibility1:
    document.write("<link rel='stylesheet' href='___.css' type='text/css'>");
    break;

  case possibility2: ...

  default: ...
}