基于隐藏变量的带有 javascript 的 anki deck class 样式的条件格式

Question

我有一个基本的 anki 牌组配置，我想为拉丁语（具体来说是葡萄牙语）名词词的性别添加颜色：

正面：男人

返回：荷马

示例：

性别：米

<-- 为了对比，我再写一张卡片的例子 --> 正面：女人

返回：穆尔赫

示例：

性别： f

为了更好的记忆，我强行打字：

{{Front}}
<br>
{{type:Back}}

到目前为止还不错。

现在，我创建了我的样式：

.card-m {
 font-family: Arial;
 font-size: 26px;
 text-align: center;
 color: white;
 background-color: #66d;
}

.card-f {
 font-family: Arial;
 font-size: 26px;
 text-align: center;
 color: white;
 background-color: #f5426f;
}

.card {
 font-family: Arial;
 font-size: 26px;
 text-align: center;
}

我的背面模板卡格式如下：

<div id=wrapper class=card-m>
{{FrontSide}}

<hr id=answer>

{{hint:Example}}
</div>

这是我的问题： 我想要一个 javascript 来读取性别变量的值，并应用 class= 以蓝色或粉红色（分别代表女性或男性）突出显示卡片背面：

<script>
var x = {{Gender}}.string;
if {{Gender}} == "m"
{ 
  document.getElementById("wrapper").class='card-m';
}
else
{ 
  document.getElementById("wrapper").class='card-f';
}
</script>

但是 Gender 变量似乎对正在应用的 class 没有影响。

知道为什么吗？

Answer 1

看起来有些 HTML 和 JS 语法不正确。还有，{{Gender}}卡字段可以直接插入字符串。

我能够使用对您的代码所做的这些更改。

全后卫模板：

<div id="wrapper" class="">
    {{FrontSide}}

    <hr id="answer">

    {{hint:Example}}
</div>

<script>

var x = "{{Gender}}";
if (x === "m")
{ 
  document.getElementById("wrapper").className = "card-m";
}
else
{ 
  document.getElementById("wrapper").className = "card-f";
}
</script>

基于隐藏变量的带有 javascript 的 anki deck class 样式的条件格式

conditional formatting of anki deck class style with javascript based on a hidden variable

javascript

anki