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()添加事件处理程序（请参阅注释）。

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

您可以使用change()：

执行此操作

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

或on()：

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

更改后，将新的CSS规则添加到 font 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>

Answer 2

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

我建议从jQuery开始，然后您可以查看此JSFiddle以查看基本模板，以获得在此处进行交互的真正基本方式（更改内容<div>。

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

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

2 个答案: