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

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>

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

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 подписчик
- 22 часа назад
- 36 просмотров
1

ответ
JavaScript

Простой
Как проверить три последние цифры числа и по условию изменить их?
- 1 подписчик
- вчера
- 135 просмотров
2

ответа
JavaScript

Простой
Как правильнее организовать код калькулятора?
- 1 подписчик
- вчера
- 120 просмотров
1

ответ
JavaScript

+3 ещё

Средний
Как поменять тип проекции карты в Leaflet?
- 3 подписчика
- 02 мая
- 728 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Добавление определенного класса к header при прокрутке до определенного блока?
- 1 подписчик
- 02 мая
- 68 просмотров
0

ответов
JavaScript

Простой
Почему не срабатывает prototype reverse на строке?
- 1 подписчик
- 01 мая
- 58 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как лучше обратиться к кнопке через id или через class?
- 2 подписчика
- 01 мая
- 183 просмотра
2

ответа
JavaScript

+2 ещё

Простой
Как сделать ajax фильтрацию по категориям в WP?
- 1 подписчик
- 01 мая
- 57 просмотров
0

ответов
JavaScript

Средний
Как сделать, чтобы встроенный обработчик события убрал сам себя?
- 3 подписчика
- 01 мая
- 714 просмотров
4

ответа
JavaScript

Простой
Как реализовать карирование так, чтобы оно не было замкнуто на одну переменную?
- 1 подписчик
- 01 мая
- 95 просмотров
0

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

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

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

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

вАйТи

от 5 000 до 25 000 ₽

Middle JavaScript Developer

AppsTrain.io

от 80 000 до 180 000 ₽

Разработка торгового бота на Байбит под виндоус серверс

04 мая 2024, в 15:12

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

Разработка лендинга на Тильда Tilda

04 мая 2024, в 14:46

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

Программа для сайта знакомств (ИИ)

04 мая 2024, в 14:41

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

Все примеры оформляйте в песочнице, например на 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 комментариев

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

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

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

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