如何为含指定class的选中option对应的.un元素设置差异化显示样式？

我明白你的需求啦——当选中带有something类的option（也就是"est"这个词）时，要让对应的.un select元素显示出和下拉列表里一样的红色手写体样式，对吧？咱们可以通过监听select的change事件，动态给目标元素添加/移除样式类来实现，下面是具体的修改方案：

步骤1：修改JavaScript逻辑，动态切换样式类 #

我们需要在现有的change函数里添加样式判断逻辑，同时确保页面初始化时默认选中的选项也能应用正确的样式：

$(document).ready(function() { });
let phrases = ["il n'est pas. "];
let lettres = /[\u0041-\u005a\u0061-\u007a\u00aa-\u00b5\u00ba-\u00c0\u00c1-\u00d6\u00d8-\u00f6]/gui;
tokenize = function(phrase) {
 let mots = [''];
 let it = phrase[Symbol.iterator]();
 for (var c = it.next(); !c.done; ) {
 for (; !c.done && c.value.match(lettres); c = it.next()) {
 mots[mots.length-1]+=(c.value);
 }
 if (mots[mots.length-1].length != 0 ){
 mots.push('');
 }
 if (c.value == ' ') {
 for (c = it.next(); !c.done && c.value == " "; c = it.next()) {continue;}
 continue;
 }
 if (!c.value.match(lettres)){
 mots[mots.length-1]+=(c.value);
 mots.push('');
 }
 c = it.next();
 }
 return mots.slice(0, mots.length-1);
}
$(document).ready(function() {
 let LARGEUR = $("#container .repeat").clone();
 let change=function(){
 $(".width_tmp_option", this.parent).html($('option:selected', this).val());
 $(this).width($(".width_tmp_select", this.parent).width());
 
 // 新增：判断选中的option是否带有something类，动态切换样式
 const selectedOpt = $(this).find('option:selected');
 if (selectedOpt.hasClass('something')) {
   $(this).addClass('something');
 } else {
   $(this).removeClass('something');
 }
 }
 $('#container').on("change",".un",change);
 let idx = Math.floor(Math.random() * Math.floor(phrases.length));
 let mots = tokenize(phrases[idx]);
 for( var i = 0 ; i < mots.length-1; i++){
 $('#container .repeat:last-child').after(LARGEUR.clone());}
 var i = 0;
 $('#container .repeat').each(function(){
 $('.un', this).val(mots[i]).each(change);
 i++;
 });
 $('select').on('change', function() {
 let phrase = $('.un').get().reduce((a,b) => a+' '+b.value, '').substring(1).trim();
 console.log(phrase);
 if (phrase.includes('il est bleu')) {
 $(".white").css('background-color', 'blue');
 } else {
 $(".white").css('background-color', 'white');
 }
 });
});

步骤2：调整CSS优先级，确保样式生效 #

因为原来的.un类已经设置了字体和颜色，我们需要提高.something类的优先级，让它能覆盖默认样式：

.something{
 color:red;
 font-family: cursive;
}
/* 新增：确保select元素的something样式能覆盖默认的.un样式 */
.un.something {
  color: red;
  font-family: cursive;
}
body {
 width: 70vw;
 height: 100vh;
 overflow: normal;
 overflow: hidden;
}
.un{
 width: 2rem;
 margin: 0.2rem;
 font-family: sans-serif;
 font-size: 2.5rem;
}
.un * {
 border-radius: 15px;
 font-size: 2.5rem;
}
option {
 background-color: none;
}
option:hover {
 background-color: green;
}
::selection {
 background-color: green;
}
.width_tmp_select{
 background-color: none;
}
.width_tmp_select{
 display : none;
 font-size: 2.5rem;
 font-family: 'Rungli-Italic';
}
#p1{
 font-size: 2rem;
 border: none;
}
/* For IE10 */
select::-ms-expand {
 display: none;
}
.repeat {
 display: inline-block;
}
.continuer {
 opacity: 0.2;
 position: absolute;
 bottom: 0.5vw;
 right: 0.5vw;
 font-size: 2.5rem;
 padding: 0.1vw;
}
.continuer:hover {
 opacity: 1;
 background-color: white;
}

步骤3：HTML部分无需修改 #

你的HTML代码保持原样即可，因为我们只需要通过JS和CSS来控制样式：

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<body class="white">
 <div id="container">
 <div class="repeat">
 <select name="mots" class="un">
 <option value="il">il</option>
 <option class="something" value="est">est</option> <!-- 这个词的显示样式会和其他词不同 -->
 <option value="bleu">bleu</option>
 <option value="n">n</option>
 <option value="'">'</option>
 <option value="pas">pas</option>
 <option value=".">.</option>
 </select>
 <select class="width_tmp_select">
 <option class="width_tmp_option"></option>
 </select>
 </div>
 </div>
</body>

效果说明 #

这样一来：

• 当你选中带有something类的"est"选项时，对应的.un select元素会立刻变成红色手写体，和下拉列表里的样式一致；
• 切换到其他选项时，样式会自动恢复成默认的无衬线字体；
• 页面初始化时，默认选中的选项也会自动应用对应的样式。

内容的提问来源于stack exchange，提问作者Aurore