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

我想在我的应用程序中显示基于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>

---

我想将span类从fa fa calendar更改为glyphion time，但它不起作用。

在addClass remove中。在.glyphicon中，仅使用glyphicon什么不起作用？正在调用ShowCalendar吗？到底发生了什么？请提供更多关于发生了什么的信息，正在调用ShowCalendar，但datetimepicker上的图标不会随日历时间而改变。