如何在mvc视图中的下拉列表更改事件中更改span类？

Question

我想根据应用程序中的dropdownlist值显示datepicker或timepicker。

以下是我在cshtml文件中的代码，

@Html.DropDownList("ddlTime", new List<SelectListItem>
{
    new SelectListItem{ Text="Daily", Value = "1" },
    new SelectListItem{ Text="Weekly", Value = "2" },
    new SelectListItem{ Text="Monthly", Value = "3" }
}, "Select a type...", new { @class = "form-control", @onchange = "javascript:ShowCalendar(this.value);" })

<div class='input-group date' id='datetimepicker9' style="float: right;">
     <input type='text' class="form-control" />
        <span class="input-group-addon">
            <span class="fa fa-calendar">
            </span>
        </span>
 </div>

下面是我的jquery代码，

<script type="text/javascript">
$(document).ready(function () {
    $('#datetimepicker9').hide();
});

function ShowCalendar(id) {
    var datetimepicker = $("#datetimepicker9");
    if (id == 1) {
        datetimepicker.show();
        $('.fa').removeClass('fa').addClass('.glyphicon glyphicon-time');
        $('.text-primary').show();

        $(function () {
            $('#datetimepicker9').datetimepicker({
                icons: {
                    time: "fa fa-clock-o",
                    date: "fa fa-calendar",
                    up: "fa fa-arrow-up",
                    down: "fa fa-arrow-down"
                },
                format: 'HH:mm'
            });
        });
    }
}
</script>

我想将范围类从fa fa-calendar更改为glyphicon glyphicon-time但它不起作用。