我有一个 Wordpress 自托管网站，用于获取有关一系列书籍的额外内容。在不久的将来，我打算让用户声明他/她阅读了该系列中的哪些书 - 虽然这只是为了好玩，但我想我可以进一步推进这个想法。
问题是，由于通用页面上的某些内容如果没有阅读某些书籍可能会被视为剧透，我想根据登录用户应用不同的样式表 - 所以如果用户已经阅读直到在书 2 中，样式表将以这样一种方式加载，即任何具有“book3”或更高级别的段落都将自动转换为带有剧透警报的隐藏段落。但是如果用户已经已经阅读了第 3 本书，则会加载不同的样式表；一个不会那样做的，并且会让用户正常看到内容。
我认为这也可以用 javascript 来完成，但我想 CSS 会更容易吗？当然，我会根据这两种方法获得答案（包括关于 javascript 的 jQuery）。
【问题讨论】：
标签： javascript jquery css wordpress stylesheet
您可以在没有 javascript 的情况下完成此操作。
如果用户已经阅读了某本书，那么一种方法是在正文中添加一个额外的类。例如，如果用户阅读了第 1 本书，您可能希望将“read-book-1”类添加到正文中。您可以使用 body_class 过滤器在 WordPress 中完成此操作。
https://codex.wordpress.org/Plugin_API/Filter_Reference/body_class
这是一个精简的例子：
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>
如果用户已阅读第 1 本书，您可以覆盖您的剧透风格：
p.spoiler {
visibility:hidden;
}
.read-book-1 p.spoiler.book-1 {
visibility:visible;
}
请注意，我只是假设您使用visibility: hidden; 来隐藏剧透文本。有不止一种方法可以做到这一点。
如果您想加入其他功能，例如显示剧透文本的链接，那么您将需要 javascript。如果您只是想在悬停时显示剧透文本，您可以只使用 css：
p.spoiler:hover {
visibility:visible;
}
【讨论】：
get_user_meta($current_user->ID, 'booksread', 'book-1') 代替注释的if user has read book 1。那会是理想的吗？
要根据 Javascript 变量加载不同的 CSS 文件，您可以使用 switch 语句。每个案例都将使用document.write() 写入 .这需要在 HTML 正文加载之前完成，这样您就不会覆盖任何内容。链接到的 MDN 页面对此进行了详细说明。
switch (variable) {
case possibility1:
document.write("<link rel='stylesheet' href='___.css' type='text/css'>");
break;
case possibility2: ...
default: ...
}
另一种选择可能是将类应用于剧透。如果第 2 本书的内容被破坏并且您知道 book2.hasRead === false，则隐藏类将应用于该内容。使用element.classlist 和getElementById 是我想到的最简单的方法。
使用与响应式设计如何在不同情况下使用不同 CSS 类似的方法也可以工作，但我对此知之甚少，无法建议如何这样做。
【讨论】：