Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/4: Рейтинг темы: голосов - 4, средняя оценка - 5.00
MirDj
3 / 3 / 2
Регистрация: 16.01.2013
Сообщений: 463
1

Замена background у элентов

12.10.2016, 11:10. Просмотров 791. Ответов 4
Метки нет (Все метки)

Здравствуйте форумчане.
Хотел спросить у вас помощи. Есть структура в html
HTML5
1
2
3
4
5
<div id="allDialog" class="dialogList">
<div id ="<?=$Rows['UserId']?>" class="dialogUser" onclick="window.UserID = '<?=$Rows['UserId']?>'; LoadMsg(<?=$Rows['UserId']?>);">
<?=$usernameFrom?>
</div>
</div>
Если посмотреть то есть общий див и внутри него, из php циклом выводятся блоки с именами пользователей, с которыми есть диалоги. каждый блок имеет свой id уникальный. При клике то такому блоку подгружаются сообщения с этим пользователем. Но не суть... Хотелось бы при клике, на нужный диалог, поменять его цвет фона, чтобы было понятно что диалог идет именно с ним.

Этого я добился таким образом в функции подгрузки сообщений добавил:
Javascript
1
document.getElementById(UserID).style.backgroundColor = "#ffffff";
Все работает, но если я нажму на другой диалог, то он тоже перекрасится, а предыдущий останется этого цвета.
Т. е получится что выделены 2 диалога. Как правильно сделать чтобы выделен был всегда только один? Надо как-то убирать цвет фона у всех кроме указанного?
0
Лучшие ответы (1)
QA
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
12.10.2016, 11:10
Ответы с готовыми решениями:

Замена background'a свежезагруженным файлом
На сервер через form загружается изображение, По окончанию загрузки которого нужно сформировать...

Замена цвета Background-а на заданный
Помогите пожалуйста. Вроде ничего сложного, но почему то не работает. На экране 3 радиокнопки и...

Замена background у кнопки-ссылки в меню активной страницы
Здравствуйте,подскажите,пожалуйста,как заменить фон в меню кнопки-ссылки на активной странице.Даны...

Замена цвета background с задержкой для ячейки ListView
Здравствуйте! Я делаю приложение для тестов. Собственно хочу реализовать следующие. Есть...

Обмен местами max и min элентов массива
Приветствую. Задан одномерный массив, заполняется рандомно. Требуется три функции: 1. Поиск...

4
j2FunOnly
Модератор
Эксперт JS
1362 / 1162 / 619
Регистрация: 05.06.2015
Сообщений: 2,535
12.10.2016, 13:16 2
Лучший ответ Сообщение было отмечено MirDj как решение

Решение

MirDj, можно определить CSS правило
CSS
1
2
3
.dialogUser.selected {
  background-color: #fff;
}
И если уже есть div.dialogUser.selected убирать класс selected и добавлять элементу, по которому кликнули.
HTML5
1
2
3
4
5
6
7
8
9
10
11
<div class="dialogList">
  <div id="user_42" class="dialogUser">
    <p>Deep Thought</p>
  </div>
  <div id="user_43" class="dialogUser">
    <p>test_user_1</p>
  </div>
  <div id="user_44" class="dialogUser">
    <p>test_user_2</p>
  </div>
</div>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var dialogs = document.querySelectorAll('.dialogList .dialogUser');
 
var loadMsg = function (userId) {
  console.log('Loading dialogs for user with id = ' + userId);
};
 
[].forEach.call(dialogs, function (dialogUser) {
  dialogUser.onclick = function () {
    var selected =  document.querySelector('.dialogUser.selected');
    if(selected) selected.className = 'dialogUser';
    this.className = 'dialogUser selected';
    loadMsg(this.id);
  }
});
https://jsfiddle.net/j2FunOnly/doby2sgu/1/
1
MirDj
3 / 3 / 2
Регистрация: 16.01.2013
Сообщений: 463
12.10.2016, 15:20  [ТС] 3
Цитата Сообщение от j2FunOnly Посмотреть сообщение
можно определить CSS правило
Спасибо... Но у меня, почему то, не совсем как надо работает.
Изначально при открытии диалогового окна, вижу несколько диалогов. Кликаю по одному первый раз, сообщения загружаются, но не происходит переключение бэкграунда. Кликаю по нему повторно или по другому, неважно и тут уже начинает все работать без проблем.

Добавлено через 3 минуты
да, и еще заметил, что при таком раскладе, когда начинает работать переключение цвета, то перестает работать подгрузка сообщений в диалоговое окно

Добавлено через 1 час 44 минуты
А может такое быть, что у меня висит событие onclick на этот див и этот скрипт использует тоже событие onclick? И из-за этого идет конфликт?
0
j2FunOnly
Модератор
Эксперт JS
1362 / 1162 / 619
Регистрация: 05.06.2015
Сообщений: 2,535
12.10.2016, 16:06 4
MirDj, в вашем конкретном случае что угодно может быть. Откуда мне знать?
0
MirDj
3 / 3 / 2
Регистрация: 16.01.2013
Сообщений: 463
12.10.2016, 16:14  [ТС] 5
Спасибо, еще раз. Я разобрался. Проблема была действительно в конфликте onclick. Cоздал внутри дива с классом dialogUser еще один див, на который повесил все нужные мне функции по событию onclick и теперь все работает как надо.
0
12.10.2016, 16:14
Answers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
12.10.2016, 16:14

Подсчитать, сколько элентов встречается в данном массиве более одного раза
подсчитать, сколько элентов встречается в данном массиве более одного раза. Массив вводится из...

Чем отличаются background-clip и background-origin?
Доброго времени суток! Объясните, пожалуйста, чем отличаются background-clip и background-origin.

Работа с background-color,background-image
Добрый день ув. пользователи! Подскажите пожалуйста, можно как-то сделать, что бы div, которому...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2020, vBulletin Solutions, Inc.