下拉菜单上的.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>