选择菜单更改时，使字体真棒图标更改颜色。

Question

这里的新手，我正在努力理解 JavaScript，但我需要朝着正确的方向努力。

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

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

这是我的示例的 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>

Answer 1

更新

我已经更新了答案以展示如何使用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 规则。

 $('#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>

Answer 2

好吧，看起来您肯定走在正确的道路上，JavaScript 正是您在这里寻找的东西，以便在您的页面上获得一些交互性。

我建议从jQuery开始，你可以查看这个JSFiddle来查看一个基本模板，这里有一个非常基本的交互方式（更改<div>的内容）。

我建议您熟悉 jQuery 的工作原理，然后尝试使用 jQuery 更改图标<i></i>的 css/class。 这应该让您走上正确的道路。