Решил поупражняться, написать что-то типо детской игры, мол, выбери цвет нажимай на квадратик и тот будет закрашиваться. Задача, казалось бы ну просто элементарная, но все-таки нет, где-то что-то не так. Всем спасибо за ответы.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Editor</title>
<script src="Learn JavaScript/Примеры/js/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function(){
$('#colors div').click(function(){
var color = $(this).attr('class');
});
$('table').on('click', 'td', function(){
$(this).toggleClass(color);
});
});
</script>
<style>
table{
width:350px;
height:200px;
margin:0 auto;
}
td{
border-collapse:collapse;
border:2px black solid;
border-radius:5px;
cursor:pointer;
}
.blue{
background-color:#FF99FF;
}
#colors{
margin:0 auto;
margin-top:30px;
width:203px;
}
#colors > div{
width:50px;
height:50px;
border-radius:10px;
display:inline-block;
margin-right:15px;
cursor:pointer;
}
.blue{
background-color:#FFCCFF;
}
.red{
background-color:red;
}
.yellow{
background-color:yellow;
}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<div id="colors">
<div class="red"></div>
<div class="blue"></div>
<div class="yellow"></div>
</div>
</body>
</html>
