javascript - 如何动态更新 css 类 onclick 下拉 jquery

Question

我有一个启用多选的下拉列表。我能够从下拉列表中检索一个值并将该值传递给 css 类。前任: 安道尔 阿拉伯联合酋长国 阿富汗 安提瓜和巴布达

我正在使用

从下拉列表中检索国家代码

$( this).val()

我有一个单独的 div 来显示标志，我有一个 li 来显示标志

      <div class="flag">
                <li class="flag selected "+<append country code here></li>
             </div>

我面临的问题是当我使用 addClass(value) onchange 事件时。它开始附加到现有的类。但是，我需要清除现有的国家代码并附加新的

我的脚本是

 $('#test').on('change', function() {
  $('li').addClass($( this).val())
    });

提前致谢。

Answer 1

使用 $('li').removeClass() 删除所有类，然后添加三个类:$('li').addClass("flag selected "+ $ (this).val())

$('li')
    .removeClass()
    .addClass("flag selected " + $(this).val());

或者，您可以将前一个类保存在一个变量中，然后使用 .removeClass(previousCountryClass)。

BTW - $("li") 太笼统了。您可能应该添加一个唯一的 id 来选择它。