Javascript 单击时更改背景颜色

我已经编写了显示早晚时间的代码，代码运行良好，但问题是，比如说，当我通过单击选择时间时，我只想更改该时间的

背景色，而不是全部

例如，首先我选择9:30，然后9:30应与背景色一起选择，再次如果我选择10:00，则先前选择的9:30的选定背景色应消失，并且相应的颜色应应用于10:00

谁能告诉我一些解决办法吗

我的代码如下所示


<div ng-app="myApp">
    <div ng-controller="AppCtrl">
        <div class="row">
            <div class="box col-md-6" style="width: 40%;height: 100%;  !important;padding-left: 15px;">
                <div class="ibox float-e-margins datetimepicker1 table-responsive">
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-4 b-r" style="text-align: center;">
                                 <h3 class="m-t-none m-b"><b>Morning</b></h3>

                                <div class="m-t-none m-b sm-time" ng-class="{'selected': timeClass}" ng-click="timeClass=true">9:00AM</div>
                                <div class="m-t-none m-b sm-time" ng-class="{'selected': timeClass}" ng-click="timeClass=true">9:30AM</div>
                                <div class="m-t-none m-b sm-time" ng-class="{'selected': timeClass}" ng-click="timeClass=true">10:00AM</div>
                                <div class="m-t-none m-b sm-time" ng-class="{'selected': timeClass}" ng-click="timeClass=true">10:30AM</div>
                                <div class="m-t-none m-b sm-time" ng-class="{'selected': timeClass}" ng-click="timeClass=true">11:00AM</div>
                                <div class="m-t-none m-b sm-time" ng-class="{'selected': timeClass}" ng-click="timeClass=true">11:30AM</div>
                            </div>
                            <div class="col-sm-8">
                                 <h3 class="m-t-none m-b"><center><b>Afternoon</b></center></h3>

                                <div class="col-md-12" style="text-align: center;">
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <div class="m-t-none m-b sm-time "  ng-class="{'selected': timeClass}" ng-click="timeClass=true">9:30AM</div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="m-t-none m-b sm-time" ng-class="{'selected': timeClass}" ng-click="timeClass=true">9:30AM</div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="m-t-none m-b sm-time" ng-class="{'selected': timeClass}" ng-click="timeClass=true">9:00AM</div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="m-t-none m-b sm-time" ng-class="{'selected': timeClass}" ng-click="timeClass=true">9:30AM</div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="m-t-none m-b sm-time" ng-class="{'selected': timeClass}" ng-click="timeClass=true">9:00AM</div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="m-t-none m-b sm-time" ng-class="{'selected': timeClass}" ng-click="timeClass=true">9:30AM</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


早晨
上午9点
上午9:30
上午10:00
上午10:30
上午11:00
上午11:30
下午
上午9:30
上午9:30
上午9点
上午9:30
上午9点
上午9:30
您应该将一些逻辑移到控制器而不是模板。我用一个解决方案更新了你的小提琴：


控制器：

$scope.changeHighlight = function(time) {
    $scope.highlightedTime = time;
}

$scope.highlightedTime = undefined;

$scope.morningTimes = ["9:00AM", "9:30AM","10:00AM","10:30AM","11:00AM","11:30AM"];

$scope.afternoonTimes = ["12:30PM", "13:00PM","13:30PM","14:00PM"];

HTML:

{{time}

基本上，我们将要显示的时间移动到控制器，并在模板中使用ng repeat来显示它们。
您应该将一些逻辑移动到控制器而不是模板。我用一个解决方案更新了你的小提琴：


控制器：

$scope.changeHighlight = function(time) {
    $scope.highlightedTime = time;
}

$scope.highlightedTime = undefined;

$scope.morningTimes = ["9:00AM", "9:30AM","10:00AM","10:30AM","11:00AM","11:30AM"];

$scope.afternoonTimes = ["12:30PM", "13:00PM","13:30PM","14:00PM"];

HTML:

{{time}

基本上，我们正在将要显示的时间移动到控制器，并在模板中使用ng repeat来显示它们。
首先，您应该使用
ng repeat
在控制器中创建范围数组来创建时间：

$scope.changeHighlight = function(time) {
    $scope.highlightedTime = time;
}

$scope.highlightedTime = undefined;

$scope.morningTimes = ["9:00AM", "9:30AM","10:00AM","10:30AM","11:00AM","11:30AM"];

$scope.afternoonTimes = ["12:30PM", "13:00PM","13:30PM","14:00PM"];

然后在模板中添加如下内容：

将所有内容放在一起：
首先，您应该使用
ng repeat
在控制器中创建范围数组来创建时间：

$scope.changeHighlight = function(time) {
    $scope.highlightedTime = time;
}

$scope.highlightedTime = undefined;

$scope.morningTimes = ["9:00AM", "9:30AM","10:00AM","10:30AM","11:00AM","11:30AM"];

$scope.afternoonTimes = ["12:30PM", "13:00PM","13:30PM","14:00PM"];

然后在模板中添加如下内容：

一切都在一起：
使用jQuery解决方案很简单：。代码如下：

jQuery(document).ready( function () {

jQuery('.sm-time').click(function () {
 jQuery('.sm-time').removeClass('selected');
 jQuery(this).addClass('selected');
});

使用jQuery解决方案很简单：。代码如下：

jQuery(document).ready( function () {

jQuery('.sm-time').click(function () {
 jQuery('.sm-time').removeClass('selected');
 jQuery(this).addClass('selected');
});

使用ng repeat将是最好的。然而，如果您想继续使用静态方式而不是使用ng repeat，您可以生成一个指令。这是JSFIDLE

使用ng repeat将是最好的。然而，如果您想继续使用静态方式而不是使用ng repeat，您可以生成一个指令。这是JSFIDLE

请检查工作示例

控制器

app.controller('AppCtrl', function ($scope) {
    $scope.morningTimes =['8.00AM','9.00AM','9.30AM','10.00AM','10.40AM'];
    $scope.selectedDate = '';

    $scope.setIndex = function(index) {
        $scope.selectedDate = index;
    }
});

HTML

{{time}
请检查工作示例

控制器

app.controller('AppCtrl', function ($scope) {
    $scope.morningTimes =['8.00AM','9.00AM','9.30AM','10.00AM','10.40AM'];
    $scope.selectedDate = '';

    $scope.setIndex = function(index) {
        $scope.selectedDate = index;
    }
});

HTML

{{time}
我在问是否允许jQuery。如果是，那么解决方案将很简单。是的，我们也在使用jquery…..我在下面发布了一个非jquery、简单且简短的答案。为了确认-这是静态的还是您正在使用ng repeat打印时间？虽然我在JSFIDLE中放置了一个静态代码，但在我的真实代码中，我正在使用ng repeat，我在询问是否允许使用jquery。如果是，那么解决方案将很简单。是的，我们也在使用jquery…..我在下面发布了一个非jquery、简单且简短的答案。为了确认-这是静态的还是您正在使用ng repeat打印时间？虽然我在JSFIDLE中放置了一个静态代码，但在我的真实代码中我正在使用ng repeat感谢您的回答，但问题是你的答案是，如果我选择9:30，那么它应该是绿色的，然后当我选择另一个时间，如果是10:00，那么之前给9:30的绿色背景色应该消失，10:00应该得到之前选择的元素的绿色背景色背景色不会消失。啊，我当时误解了你的问题。让我快速检查一下。一次应选择一个时间，并且应为绿色background@Alex男：我更新了我的提琴，一次选一把：）谢谢你的回答，但问题是你的回答是，如果我选择9:30，那么它应该是绿色的，之后，当我选择另一个时间时，比如10:00，那么之前给9:30的绿色背景色应该消失，10:00应该得到之前选择的元素的绿色背景色背景色不会消失。啊，我误解了你的问题。让我快速检查一下。一次应选择一个时间，并且应为绿色background@Alex男：我更新了我的小提琴，让它一次选一把：）
<div class="m-t-none m-b sm-time" ng-class="{'selected':selectedDate == $index}" ng-click="setIndex($index)" ng-repeat="time in morningTimes">{{time}}</div>