时间戳

首页 > 解决方案 > Javascript/jQuery - 从选项列表中添加类（下拉）

javascript - Javascript/jQuery - 从选项列表中添加类（下拉）

问题描述

在此处输入图像描述 所以我有一个过滤器列表，当点击它时它应该添加一个类img，所以当点击过滤器时，它应该添加class='brannan'到 img，选项和值与类一相同。我如何知道addClass();图像，例如，如果我选择过滤器brannan，它应该将类 brannan 添加到 img。

<div class="form__field">
        <img id="preview" src="#" alt="Image preview" />
</div>

 <div class="form__field">    
        <select name="filter">
            <option value="_1977">1977</option>
            <option value="aden">aden</option>
            <option value="brannan">brannan</option>
            <option value="brooklyn">brooklyn</option>
            <option value="clarendon">clarendon</option>
        </select>

我假设代码将遵循onchangeselect -> get value of it ->addClass();

标签： javascriptjqueryonclickonchange

解决方案

在事件上使用addClass()函数添加类。change()还使用删除类removeClass

$("select[name='[filter]'").on('change',function(){
  var prevClass = $('img').attr('class');
  $('img').removeClass(prevClass);
  $('img').addClass($(this).val());
}); 
<div class="form__field">
        <img id="preview" src="#" alt="Image preview" />
</div>

 <div class="form__field">    
        <select name="filter">
            <option value="_1977">1977</option>
            <option value="aden">aden</option>
            <option value="brannan">brannan</option>
            <option value="brooklyn">brooklyn</option>
            <option value="clarendon">clarendon</option>
        </select>

推荐阅读