为jQuery中的各种CSS选择器创建单个函数更改
为jQuery中的各种CSS选择器创建单个函数更改
提问于 2016-03-28 03:49:30
我使用下面的函数添加CSS类(蓝色、红色、粉红色.)在DIV .container中，从select #selcolor。是否可以在具有不同ID的其他选择标记中使用相同的函数？在这种情况下，类(蓝色，红色，粉红色.)不会将变量“.container”添加到DIV div_action中，因此必须修改变量"div_action“函数。
function select_changed() {
jQuery('select#selcolor').each(function() {
var selected = jQuery(this).val();
var div_action = '.container';
if(selected == '') {
jQuery(div_action).addClass('');
}
if(selected == 'blue') {
jQuery(div_action).addClass('blue');
} else {
jQuery(div_action).removeClass('blue');
}
if(selected == 'pink') {
jQuery(div_action).addClass('pink');
} else {
jQuery(div_action).removeClass('pink');
};
if(selected == 'red') {
jQuery(div_action).addClass('red');
} else {
jQuery(div_action).removeClass('red');
};
});
}
$('select#selcolor').change(function() {
select_changed();
});
<!-- This is HTML -->
<select name="selcolor" id="selcolor" class="form-control">
<option value=''>Select Color</option>
<option value="blue">Blue</option>
<option value="pink">Pink</option>
<option value="red">Red</option>
</select>回答 2
Stack Overflow用户
回答已采纳
发布于 2016-03-28 03:59:49
event.currentTarget.id用于获取当前目标的id。因此，您也可以将此功能用于其他复选框。
注意:我假设选择框为单个select，并稍微简化了代码。
function select_changed(id) {
jQuery('select#'+id).each(function() {
var selected = jQuery(this).val();
var div_action = '.container';
jQuery(div_action).removeClass("blue pink red");
jQuery(div_action).addClass(selected);
});
}
$('select').change(function(event) {
select_changed(event.currentTarget.id);
});Stack Overflow用户
发布于 2016-03-28 05:04:00
尝试使用onChange函数，这只是逻辑，您可以在内部做任何需要的事情。
函数：
function select_changed(val) {
var selectedValue=val;
if(selectedValue=='blue'){
alert("1"+selectedValue);
}
else if(selectedValue=='pink'){
alert("2"+selectedValue);
}
else if(selectedValue=='red'){
alert("3"+selectedValue);
}
}html:
<select name="selcolor" id="selcolor" class="form-control" onchange="select_changed(this.value)">
<option value=''>Select Color</option>
<option value="blue">Blue</option>
<option value="pink">Pink</option>
<option value="red">Red</option>
</select>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36255684
复制相关文章
相似问题
腾讯云开发者
