下拉列表中的 .addClass 函数有问题

Question

我想用下拉菜单更改字体样式。这个小提琴工作正常，但在页面上无法正常工作。我想我遇到了.addClass问题。或者我无法获得选项名称。.不知道

https://jsfiddle.net/mc2xd63o/

它在一个简单的页面上效果很好：https://roarcraft.com.tr/pages/kisisellestirme

但是我卡住了向此页面添加代码：https://roarcraft.com.tr/collections/deri-anahtarlik/products/yarasa-deri-anahtarlik-2-adet

有一个用<div id="infiniteoptions-container"></div>代码触发的插件，我无法更改类名。无法弄清楚错误在哪里..

Answer 1

对我来说，这是您必须使用 CSS 变量的典型情况

见 https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

示例代码

const Root    = document.documentElement
, fontSel = document.querySelector('#select-font')
fontSel.onchange=_=>{
Root.style.setProperty('--choosed-font', fontSel.value)
}

:root {
--choosed-font  : "Courier new";
}
#test {
font-family: var(--choosed-font);
}
#lorem {
margin: 1em;
padding: .2em;
font-family: var(--choosed-font);
}

<input id="test" type="text" value="test">
<select id="select-font">
<option value="Courier new" selected>Courier</option>
<option value="Arial" >Arial</option>
<option value="Times" >Times</option>
</select>
<div id="lorem">
Ideoque fertur neminem aliquando ob haec vel similia poenae addictum oblato de more elogio revocari iussisse,
quod inexorabiles quoque principes factitarunt. et exitiale hoc vitium, quod in aliis non numquam intepescit, 
in illo aetatis progressu effervescebat, obstinatum eius propositum accendente adulatorum cohorte.
</div>