使字体awesome图标改变颜色时，选择菜单的变化

Make font awesome icon change color when select menu changes.

本文关键字：选择 菜单 变化 变颜色 字体 awesome 图标 改变      更新时间：2023-09-26

新手在这里，我正在努力理解JavaScript，但我需要在正确的方向上一点推动。

我对HTML和CSS有基本的了解。你能告诉我我需要使用哪种语言来完成我的目标，我需要Bootstrap等吗?

这只是我正在做的一个例子。我需要字体awesome图标更改为用户从下拉菜单中选择的选项的颜色。

这是我的例子的HTML。

<link rel="stylesheet" type='text/css' href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
 <table> 
    <tr>
        <td>
            <select>
            <option value="blue">BLUE</option>
            <option value="red">RED</option>
            <option value="green">GREEN</option>
        </select>
    </td>
    <td>
        <td>
            <i class="fa fa-phone"></i>
        </td>
        </tr>
</table>
<style>
<!--Help here! -->
</style>

UPDATE

我已经更新了答案，以显示如何使用on()添加事件处理程序(请参阅注释)。

您只需要为select元素的change事件添加一个处理程序。

您可以使用change():

$('#my_select').change( function() {
    $('#icon_phone').css( 'color', $(this).val() );
});

或与on():

$('#my_select').on( 'change', function() {
    $('#icon_phone').css( 'color', $(this).val() );
});

当它改变时，添加一个新的CSS规则到字体awesome图标

$('#my_select').change( function() {
    $('#icon_phone').css( 'color', $(this).val() );
});
$('#my_select2').on( 'change', function() {
    $('#icon_phone').css( 'color', $(this).val() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" type='text/css' href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
 <table> 
    <tr>
        <td>
            <select id="my_select" >
                <option value="blue">BLUE</option>
                <option value="red">RED</option>
                <option value="green">GREEN</option>
            </select>
            <select id="my_select2" >
                <option value="blue">BLUE</option>
                <option value="red">RED</option>
                <option value="green">GREEN</option>
            </select>        </td>
    <td>
        <td>
            <i id="icon_phone" class="fa fa-phone"></i>
        </td>
        </tr>
</table>
<style>
<!--Help here! -->
</style>

看起来你肯定是在正确的道路上，JavaScript就是你在这里寻找的东西，在你的页面上获得一些交互性。

我建议从jQuery开始，你可以查看这个JSFiddle，看看一个基本的模板，一个真正基本的方式来获得交互在这里(改变<div>的内容。

我建议熟悉jQuery的工作原理，然后尝试使用jQuery更改图标<i></i>的css/class。

相关文章：