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

【问题标题】：Javascript/jQuery - Add class from option list (dropdown)Javascript/jQuery - 从选项列表中添加类（下拉）
【发布时间】：2018-05-10 10:29:23
【问题描述】：

所以我有一个过滤器列表，当点击它时它应该添加一个类到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>

我假设代码将遵循类似 onchange 的选择 -> 获取它的值 -> addClass();

【问题讨论】：

标签： javascript jquery onclick onchange

【解决方案1】：

在change() 事件上使用addClass() 函数添加类。也可以使用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>

【讨论】：

仅供参考，您可以使用不带参数的removeClass() 来删除所有类。因此，您可以将其简化为 $('img').removeClass().addClass($(this).val());
@RoryMcCrossan 确切地说，我们也可以这样做。 :) 谢谢你的好建议朋友。

【解决方案2】：

您需要一个onChange 函数是对的，然后您可以将类设置为值的类：

var selectElem = document.querySelector('.form__field select');

selectElem.onchange = function() {
  document.querySelector('#preview').className = this.value;
}

<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>
</div>

【讨论】：

【解决方案3】：

在select 上添加一个 onchange 监听器，并将所选值作为类添加到您想要的 div 中

$("select").change(function(){
     console.log("Adding class ",$(this).val())
    $("#preview").removeClass();
    $("#preview").addClass($(this).val())
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="form__field">
        <img id="preview" src="#" alt="Image preview" />
</div>
<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>

注意：你不想在img 中保留之前添加的类，所以$("#preview").removeClass(); 是删除所有之前添加的类并添加当前重要的类

【讨论】：

【解决方案4】：

使用 jQuery 的 change、addClass() 和 removeClass() 尝试以下操作：

var classToRemove = '';
$('[name=filter]').change(function(){
  $('#preview').removeClass(classToRemove);
  $('#preview').addClass($(this).val());
  classToRemove = $(this).val();
  
  //For demonstration
  console.log($('#preview').attr('class'))
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

【讨论】：

【解决方案5】：

为了更好的浏览器兼容性，最好使用input 事件而不是change 事件。

$( '[name=filter]' ).on( 'input propertychange', function() {
	$( '#preview' ).removeClass().addClass( ($( this ).val() ) );
	console.log( 'The image has a class named: ' + $( '#preview' ).attr( 'class' ) )
});

#preview {
  width: 100px;
  height: 100px;
  border-width: 5px;
  border-style: solid
}
.default {
  border-color: black
}
.blue {
  border-color: blue
}
.yellow {
  border-color: yellow
}
.red {
  border-color: red
}
.green {
  border-color: green
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form__field">
	<img id="preview" src="https://www.gravatar.com/avatar/ef95d6eafc29a0cd76af27acc45da6dd?s=328&d=identicon&r=PG&f=1" alt="Image preview" class="default" />
</div>

<div class="form__field">    
	<select name="filter">
		<option value="default">Default</option>
		<option value="blue">Blue</option>
		<option value="yellow">Yellow</option>
		<option value="red">Red</option>
		<option value="green">Green</option>
	</select>
</div>

【讨论】：