为jQuery中的各种CSS选择器创建单个函数更改

我使用下面的函数在选择#selcolor的DIV .container中添加CSS类（蓝色，红色，粉红色...）。是否可以在具有不同ID的其他选择标签中使用相同的功能？在这种情况下，类（蓝色，红色，粉红色......）将不会被添加到DIV .container中，因此必须修改变量“div_action”函数。为jQuery中的各种CSS选择器创建单个函数更改

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>

来源

2016-03-28 Rafael

这是一个多选择？ –

如何将ID传递给函数以便您可以使用它来进行任何选择？ –

event.currentTarget.id用于获取当前目标的id。所以你可以在其他选择框中使用这个功能。

注：我假定选择框为单选，并简化了代码。

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); 
});

来源

2016-03-28 03:59:49

尝试使用的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>

来源

2016-03-28 05:04:00

为jQuery中的各种CSS选择器创建单个函数更改

回答

相关问题