Изменить цвет при выборе, нажав с помощью JavaScript JavaScript

Question

Изменить цвет при выборе, нажав с помощью JavaScript JavaScript

0

У меня есть календарь с датами и временными интервалами. После выбора даты придут временные интервалы. Оттуда вы можете выбрать время, щелкнув. Теперь я хочу изменить цвет выбранного элемента во временном интервале. Предположим, если вы нажмете на временной интервал 11 AM-12PM, тогда он должен получить красный цвет, а затем вы нажмете в следующий раз, то есть 12PM-1PM, так что 12PM-1Pm получат красный цвет и сын. Я попытался использовать фокус, он не работает. Поскольку я уже использую hover. По этой причине focus и hover не будут работать в одно и то же время. Может быть, мне нужно использовать что-то onclick. Я добавил код плункера ниже. Это CSS:

.frame {
    width: 100%;
    height: 400px;

    margin-left: 0%;
    border: 1px solid #777777;
    overflow: auto;
}

.datepicker {
    width: 100%;
    list-style: none;
    padding: 0px;
    margin: 0px;
}

.datepicker li {
    cursor: pointer;
    border-bottom: 1px solid #ededed;
    padding: 10px;
}
.datepicker li:hover {
    background: #EEE;
}
.text-center {
    text-align: center;
}

.border {
    border: 1px solid red;
}

Ссылка на плунжер

cyberoy 28 окт. 2015, в 08:18

Источник

0

Вы должны использовать JavaScript для обработки событий, таких как клик
Kristijan Iliev 28 окт. 2015, в 07:06
0

Можете ли вы добавить ключ с именем isSelected и установить его по клику. Также добавьте условие к классу в подобный class:{className: $data.isSelected} . Также убедитесь, что сбросил isSelected для всех временных интервалов, а затем установите текущий как true.
Rajesh 28 окт. 2015, в 07:36

Теги:

html

angularjs

css

2 ответа

0

Да, как сказал @Chris, вам нужно использовать Javascript, потому что вы хотите показать это при нажатии.

Я не знаком с AngularJs, но концептуально вы можете добавить класс

.selected {
   background-color: red;
}

Затем добавьте этот класс к выбранному элементу и удалите его из элемента lastSelected.

Natural Lam 28 окт. 2015, в 05:11

Ещё вопросы

Вы должны использовать JavaScript для обработки событий, таких как клик
Можете ли вы добавить ключ с именем isSelected и установить его по клику. Также добавьте условие к классу в подобный class:{className: $data.isSelected} . Также убедитесь, что сбросил isSelected для всех временных интервалов, а затем установите текущий как true.

Ernest Ten · Accepted Answer · 2015-10-28T04-46-00.000Z

Вы можете настроить таргетинг на выбранный элемент через $index а затем добавить к нему ng-class директиву ng-class. В принципе, вам необходимо:

Добавьте выбранную переменную индекса времени в область действия:
```
$scope.selectedTimeIndex = -1;
```

Передать $index для selectTime и условно добавить selected класс:

<li ng-click="selectTime(time, $index)" ng-class="{selected: $index == selectedTimeIndex}" ng-repeat="time in timeValues">{{time}}</li>

Изменение selectedTimeIndex при вызове selectTime:

$scope.selectTime = function(time, index) {
    $scope.selectedTimeIndex = index;
    // The rest of your function.
};

Добавьте selected класс в ваш.css:
```
.selected {
    background: red;
}
```

Простой пример здесь.

Ну, мы получили ответ. Красиво сделано ~ (у)