在目标元素后添加了类

Question

我有一个forloop，它为每个项目附加一个包含子元素的div

for (i = 0; i < len; ++i) {
    if (i in courseModuleList) {
        s = courseModuleList[i];
        if (this.modules.get(s) != undefined) {
            var moduleName = (this.modules.get(s).get('Id'));
            var moduleId = (this.modules.get(s).get('OptimeIndex'));
            var courseDuration = (courseTemplate.get('Duration'));

            var scheduleClass;
            var scheduleStatus;
            var startDate;

            if (scheduleStatus === "Fully Scheduled") {
                scheduleClass = "cpCreatedCourseStatusScheduled";
            } else if (scheduleStatus === "Part Scheduled") {
                scheduleClass = "cpCreatedCourseStatusPartScheduled";
            } else if (scheduleStatus === "Unscheduled") {
                scheduleClass = "cpCreatedCourseStatusUnscheduled";
            } else {
                scheduleClass = "cpCreatedCourseStatusUnscheduled";
            }

            if (courseDuration == 1) {
                courseDuration += " day";
            } else {
                courseDuration += " days";
            }
            div.append('<div id="selectedCourse" data-id=' + moduleId + '> <a href="#" class="list-group-item cpCreatedCourseWrap clearfix">' +
                '<div class="col-lg-6 col-md-12">' +
                '<div id="courseName" class="cpCreatedCourseName">' + moduleName + '</div>' +
                '<div class="cpCreatedCourseDuration">' + courseDuration + '</div>' +
                '</div>' +
                '<div class="col-lg-3 col-md-6 col-sm-6 col-xs-6 cpCreatedCourseStatusWrap">' +
                '<label>Schedule Status:</label>' +
                '<div class="' + scheduleClass + '">' + scheduleStatus + '</div>' +
                '</div>' +
                '<div class="col-lg-3 col-md-6 col-sm-6 col-xs-6 cpCreatedCourseDateWrap">' +
                '<label>Start Date:</label>' +
                '<div class="cpCreatedCourseDate">' + startDate + '</div>' +
                '</div>' +
                '</a> </div>');
        }
    }
}

然后我在'#selectedCourse'上添加了一个点击事件，如果selectedCourse等于数组中的项目，则向data-id div添加一个类。

this.$el.find('#selectedCourse').removeClass('cpCreatedCourseWrapActive');

var stepType = $(e.currentTarget).data('id');

var steps = [];

var i, s, courseModuleList = (this.courseTemplate.get('ModuleIndexList')),
    len = courseModuleList.length;
for (i = 0; i < len; ++i) {
    if (i in courseModuleList) {
        s = courseModuleList[i];
        if (this.modules.get(s) != undefined) {
            var optimeIndex = (this.modules.get(s).get('OptimeIndex'));
            steps.push(optimeIndex);
        }
    }
}

_.each(steps,
    function(step) {
        if (stepType === step) {
            $(e.currentTarget).addClass('cpCreatedCourseWrapActive');
        }
    });

这是我的css

.cpCreatedCourseWrapActive:hover{
    background-color:#ddd;
}

.cpCreatedCourseWrapActive{
    background-color:#ddd !important;
}

当我点击一个元素时，它似乎会在元素后面添加，因为我可以看到边缘周围的颜色。在下图中，我将background-color更改为蓝色以使其清晰

我出错的任何想法？任何帮助将不胜感激。