Как сделать так, что бы при повторном клике цвет исчезал?

Question

JackShcherbakov @JackShcherbakov

JavaScript

Как сделать так, что бы при повторном клике цвет исчезал?

Вот код на jsfiddle, там почему-то jquery не хочет подключаться.https://jsfiddle.net/CitizenOne/m4cd5n79/1/
Ну а вот сам код. Надо что бы при повторном клике на клетку цвет исчезал.

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Game For Yan</title>
<script src="jquery-3.2.1.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script>
	$(document).ready(function(){
		$('#game').hide();
		$('#start').click(function(){
			$(this).hide();
			$('.menu').hide();
			$('#game').slideDown(300);
			$('.play').hide();
		});
		var color;
		$('#colors div').click(function(){
			color = $(this).attr('class');
			$('#colors div').removeClass('checked');
			$(this).addClass('checked');	
		});
		$('table').on('click', 'td', function(){
				$(this).removeClass(color);//Внимание сюда
				$(this).toggleClass(color);
		});
		$('.lol').mouseover(function(){
			$('td').removeClass();
		});
		$('.clean').click(function(){
			$('td').removeClass();
		});
	});
</script>
<style>
body{
	margin:0;
	font-family:Arial, Helvetica, sans-serif;
	background:url('img/bg.jpg');
}
#start{
	width:500px;
	height:50px;
	cursor:pointer;
	color:white;
	border-radius:50px;
	transition:0.3s;
	border:6px white solid; 
	background-color:#0099FF;
	position:absolute;
	left:750px;
	top:80px;
	text-align:center;
	font-size:30px;
}
#start:hover{
	background-color:#3366CC;
}
#start p{
	margin:0;
	padding-top:7px;
}
.play{
	width:100%;
	height:250px;
	background-color:#333333;
	margin-top:50px;
	position:relative;
}
table{
	margin:0 auto;
	border-collapse: collapse;
}
td{
	border:3px #333333 solid;
	cursor:pointer;
	margin:5px;
	background-color:white;
	height:80px;
	width:80px;
}
#colors{
	margin:0 auto;
	margin-top:30px;
	width:100%;
	background-color:#333333;
	padding:15px 0 15px 15px;
	text-align:center;
	position: relative;
}
#colors > div{
	width:50px;
	height:50px;
	display:inline-block;
	margin-right:15px;
	cursor:pointer;
}
#colors p{
	color:white;
	margin:0;
	margin-top:15px;
	font-size:20px;
}
/********************СOLORS********************/
	.blue{
		background-color:#FFCCFF;
	}
	.red{
		background-color:red;
	}
	.yellow{
		background-color:#FFFF33;
	}
	.white{
		background-color:#FFFFFF;
	}
	.green{
		background-color:#999933;
	}
	.gray{
		background-color:#999999;
	}
	.red{
		background-color:#FF0000;
	}
	.black{
		background-color:#000000;
	}

	.yan{
		background-image:url('colors/yan.jpg');
	}
	.yel{
	background-image:url('colors/yel.jpg');
	}
	.car{
	background-image:url('colors/car.jpg');
}
/********************СOLORS********************/
.clean{
	width:150px;
	height:50px;
	background-color:#0099FF;
	cursor:pointer;
	color:white;
	text-align:center;
	border-radius:50px;
	transition:0.3s background-color;
	display: inline-block;
	position: absolute;;
}
.clean:hover{
	background-color:#3366CC;
}
.clean p{
	margin:0;
}
.checked{
	border-bottom: 6px white solid;
}
h1{
	text-align:center;
	background-color:#333333;
	color:white;
	padding:15px 0 15px 0;
}
.video{
	width:1690px;
	margin:0 auto;
}
</style>
</head>

<body>
<div class="play">
	<div id="start"><p>Рисовать!</p></div>
</div>
<div class="menu">
	<h1>МУЛЬТИКИ</h1>
	<div class="video">
		<iframe width="560" height="315" src="https://www.youtube.com/embed/T4twqnmPjpQ" frameborder="0" allowfullscreen></iframe>
		<iframe width="560" height="315" src="https://www.youtube.com/embed/2ZdNT4VwKuM" frameborder="0" allowfullscreen></iframe>
		<iframe width="560" height="315" src="https://www.youtube.com/embed/sajgcqs1xio" frameborder="0" allowfullscreen></iframe>
		<iframe width="560" height="315" src="https://www.youtube.com/embed/TiX-6A2Cn30" frameborder="0" allowfullscreen></iframe>
		<iframe width="560" height="315" src="https://www.youtube.com/embed/7OHMqdMpsj8" frameborder="0" allowfullscreen></iframe>
		<iframe width="560" height="315" src="https://www.youtube.com/embed/4IfmzhwzPVM" frameborder="0" allowfullscreen></iframe>
		<iframe width="560" height="315" src="https://www.youtube.com/embed/4SJ6SNiXcOw" frameborder="0" allowfullscreen></iframe>
		<iframe width="560" height="315" src="https://www.youtube.com/embed/bR-fdVxHO8M" frameborder="0" allowfullscreen></iframe>
		<iframe width="560" height="315" src="https://www.youtube.com/embed/z-bTLD7fESY" frameborder="0" allowfullscreen></iframe>
		<iframe width="560" height="315" src="https://www.youtube.com/embed/n_YRqcIN2-0" frameborder="0" allowfullscreen></iframe>	
		<iframe width="560" height="315" src="https://www.youtube.com/embed/-L7xUFmNzYs" frameborder="0" allowfullscreen></iframe>
		<iframe width="560" height="315" src="https://www.youtube.com/embed/YnltFSl_DQ0" frameborder="0" allowfullscreen></iframe>
	</div>
</div>
<div id="game">
	<h1>Игра для Яна</h1>
	<table cellspacing="0">
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>

		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>

		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
			<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
			<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</table>
	<div id="colors">
		<div class="white"></div>
		<div class="red"></div>
		<div class="blue"></div>
		<div class="yellow"></div>
		<div class="green"></div>
		<div class="blue"></div>
		<div class="gray"></div>
		<div class="black"></div>
		<div class="yan"></div>
		<div class="yel"></div>
		<div class="car"></div>
		<article class="clean"><p>Отчистить</p></article>
		<p>Выбери цвет!</p>
	</div>
</div>
</body>

</html>

Вопрос задан более трёх лет назад
208 просмотров

1 комментарий

Подписаться 1 Оценить 1 комментарий

Решения вопроса 1

15 комментариев

JackShcherbakov @JackShcherbakov Автор вопроса

В таком случае, если залить клетку, залить ее опять другим цветом не получается.

Написано более трёх лет назад
Михаил Захаров @cashalot

JackShcherbakov: просто получается так, что вы за один клик ничего не делаете - вы удаляете ей этот класс, а вторая строка опять ей его добавляет.

Написано более трёх лет назад
JackShcherbakov @JackShcherbakov Автор вопроса

Михаил Захаров: Это я сделал для того, что бы небыло тысячи класов. То есть даже если бы при повторном клике класс отменялся, под этим классом ничего кроме пустоты не будет, но к сожалению, это не работает.

Написано более трёх лет назад
Михаил Захаров @cashalot

JackShcherbakov: все прекрасно работает - https://jsfiddle.net/q8pqnrvh/

Написано более трёх лет назад
JackShcherbakov @JackShcherbakov Автор вопроса

Михаил Захаров: Ничего не работает. Смотрите: возьмите, например, красный цвет, и закрасьте клетку, затем возьмите голубой цвет и тыкнете по той же самой клетке, она не закрасится, в этом очередная проблема.

Написано более трёх лет назад
JackShcherbakov @JackShcherbakov Автор вопроса

JackShcherbakov: Точнее она закрасится, но при повторном нажатии по ней появится предыдущий цвет.

Написано более трёх лет назад
JackShcherbakov @JackShcherbakov Автор вопроса

Михаил Захаров: Некоторые клетки 2-ой раз заполняются, а некоторые нет. Бред.

Написано более трёх лет назад
Михаил Захаров @cashalot

JackShcherbakov: https://jsfiddle.net/hv73sk88/

Написано более трёх лет назад
Михаил Захаров @cashalot

JackShcherbakov: вам нужно сделать еще один класс для белых клеток и один общий класс для всех закрашенных.

Написано более трёх лет назад
Михаил Захаров @cashalot

JackShcherbakov: вот - https://jsfiddle.net/go1xxd2w/. Трогал только js. Это говнокод, почистите уж сами )

Написано более трёх лет назад
Михаил Захаров @cashalot

JackShcherbakov: ау, вы тут?

Написано более трёх лет назад
Kovalsky @lazalu68

Михаил Захаров: а он всегда так делает. Как только кто-то говорит что-то непонятное для него или наоборот - его проблему решили за него - всё, он больше на всё оповещения касающиеся этого вопроса не обращает внимания.

JackShcherbakov: скажите, на кой чёрт вы задаёте вопросы, если вы игнорируете ответы? Я вам уже писал как подключить jQuery - в поле JAVASCRIPT нажимаете справа сверху на шестерёнку, выбираете framework jQuery. По теме: "Некоторые клетки 2-ой раз заполняются, а некоторые нет. Бред." - вот какая тут может возникнуть проблема? Это же ваша разработка, вы можете придумать что хотите. Можете на все клетки сразу вешать класс white и потом уже в зависимости от него вешать или заменять класс цвета.

Написано более трёх лет назад
JackShcherbakov @JackShcherbakov Автор вопроса

Михаил Захаров: Да, я тут. Спасибо вам огромное, младший сын доволен! Просто я был не дома все это время.

Написано более трёх лет назад
JackShcherbakov @JackShcherbakov Автор вопроса

Никита Полевой: Вообще-то я стараюсь всегда отвечать, несмотря на то, что я дома нахажусь-то не так уж и много времени. Откуда столько негатива? Спасибол большое за отклик.

Написано более трёх лет назад
JackShcherbakov @JackShcherbakov Автор вопроса

Никита Полевой: На счет jQuery, честно, первый раз это читаю. Спасибо огромное!

Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

+1 ещё

Простой
Как закрыть рекомендации rutube iframe?
- 1 подписчик
- 6 часов назад
- 48 просмотров
0

ответов
JavaScript

Простой
Как отключить strictMode у плагина intl-tel-input?
- 1 подписчик
- 11 часов назад
- 46 просмотров
1

ответ
JavaScript

Простой
Что происходит со свойством класса при присвоении извне?
- 1 подписчик
- вчера
- 76 просмотров
4

ответа
JavaScript

+1 ещё

Простой
Как правильно застримить большой поток из exec(...).stdout в ответ сервера?
- 1 подписчик
- вчера
- 54 просмотра
1

ответ
JavaScript

+1 ещё

Простой
Как запускать только текущее (открытое) видео в слайдере swiper?
- 2 подписчика
- вчера
- 104 просмотра
1

ответ
JavaScript

+1 ещё

Средний
Как определить инлайн стиль и заменить на соответствующие теги?
- 1 подписчик
- вчера
- 55 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Писал ли кто-то автотесты с помощью Cypress по виджетам на amCharts 5? Можете помочь разъяснить структуру и синтаксис этого дела?
- 2 подписчика
- 28 нояб.
- 53 просмотра
0

ответов
JavaScript

Простой
Как не прекращая цикл пройтись?
- 1 подписчик
- 27 нояб.
- 107 просмотров
0

ответов
JavaScript

Средний
Можно ли прописать формулу расчёта с нефиксированной скидкой?
- 1 подписчик
- 27 нояб.
- 68 просмотров
1

ответ
JavaScript

Простой
Как инициировать скрипт при определенной ширине экрана?
- 1 подписчик
- 27 нояб.
- 64 просмотра
1

ответ
Показать ещё Загружается…

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Frontend-разработчик JavaScript

div. • Ставрополь

от 40 000 до 90 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

Выполнить тестовое задание с Bootstrap, HTML5, CSS3 и JavaScript

30 нояб. 2024, в 01:14

1000 руб./за проект

Деплой, разработка и поддержка Fullstack NextJS + React

29 нояб. 2024, в 23:26

2500 руб./в час

Провести CFD тестирование для оптимальной 3D

29 нояб. 2024, в 22:32

80000 руб./за проект

Все примеры оформляйте в песочнице, например на jsfiddle

Answer 1 · 2017-07-20 10:54:49

Михаил Захаров @cashalot

Если я вам помог - пометьте мой ответ как решение

Вот тут

$('table').on('click', 'td', function(){
        $(this).removeClass(color);
        $(this).toggleClass(color);
    });

Удалите строку - $(this).removeClass(color);

Ответ написан более трёх лет назад

15 комментариев

Как сделать так, что бы при повторном клике цвет исчезал?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт