Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 23.08.2018, 15:33   #1
last221
 
Регистрация: 23.08.2018
Сообщений: 9
Смущение Выделение и снятие выделения с элемента

Добрый день!
Пытаюсь на Jquery сделать так, чтобы при одном клике выделялся элемент div, при повторном - снималось выделение. Что я делаю не так?

Код:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
var div = $('#container');
for (i = 1; i < 91; i++) {
	div.append('<div class="place" id="id_'+i+'">'+i+'</div>');
	}
	
$('.place').on('click', function() {
		if ($(this).css('backgroundColor') !== 'red') { $(this).css('backgroundColor', 'red'); alert($(this).css('backgroundColor')); } else if ($(this).css('backgroundColor') == 'red') { $(this).css('backgroundColor', 'lightgreen'); alert($(this).css('backgroundColor')) }
		});
});

</script>
<style>
	
div#container {
  width: 400px;
}

#container > .place {
  width: 20px;
  height: 20px;
  background-color: lightgray;
  float: left;
  margin: 1px;
}

</style>
</head>
<body>
<header>
<div id='container'></div>
</header>
</body>
</html>
last221 вне форума Ответить с цитированием
Старый 23.08.2018, 15:48   #2
Serge_Bliznykov
Старожил
 
Регистрация: 09.01.2008
Сообщений: 26,238
По умолчанию

Цитата:
Сообщение от last221 Посмотреть сообщение
Что я делаю не так?
Вы бы посмотрели, чему равен $(this).css('backgroundColor') и вопрос был снят.

Код:
                console.log($(this).css('backgroundColor'));
ну и, имхо, Вы вообще зря пытаетесь так сделать.
сделайте класс, который будет делать красный фон и переключайте его через готовый метод toggleClass()

например,
Код:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
var div = $('#container');
for (i = 1; i < 91; i++) {
	div.append('<div class="place" id="id_'+i+'">'+i+'</div>');
	}
	
$('.place').on('click', function() {
                $(this).toggleClass('divSelected');
	});
});

</script>
<style>
	
div#container {
  width: 400px;
}


#container > .place {
  width: 20px;
  height: 20px;
  background-color: lightgray;
  float: left;
  margin: 1px;
}

.divSelected {
  background-color: red !important;
} 


</style>
</head>
<body>
<header>
<div id='container'></div>
</header>
</body>
</html>
p.s. а ещё, по моему такого рода задачи могут решаться даже без JS, через CSS...

Последний раз редактировалось Serge_Bliznykov; 23.08.2018 в 15:55.
Serge_Bliznykov вне форума Ответить с цитированием
Старый 23.08.2018, 16:39   #3
last221
 
Регистрация: 23.08.2018
Сообщений: 9
По умолчанию

Serge_Bliznykov, благодарю Вас!
last221 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Запретить снятие выделения Esc в DBGridEh MrDimain БД в Delphi 3 16.04.2017 23:23
Cобытие: "снятие выделения ячейки" roborrr Microsoft Office Excel 6 04.06.2016 21:11
Снятие выделения с пункта <select multiple> fs444 JavaScript, Ajax 1 18.04.2014 17:42
[Qt] Выделение записи в TableView и обработка этого выделения newStudent Qt и кроссплатформенное программирование С/С++ 2 21.06.2011 10:17
Снятие выделения или смена события ListBox Хамяг Общие вопросы Delphi 0 20.04.2010 23:32