Здравствуйте, знающие!
У меня к вам вопрос.
Передо мной встала задача в университете, которую попросил реализовать преподаватель, а я застрял и не могу её решить. Я надеюсь Вы мне поможете.
Суть вопроса такова.
Есть 7 ячеек. В первых трех - черные шарики, в последних трех - белые. Задача. Реализовать вроде бы как "игру", которая будет заключаться в том, что бы по очереди передвинуть черные шарики на место белых, а белые - на место черных. Шарики могут "перепрыгивать" друг через друга и ходить только в пустую ячейку.
Вот что я сумел "наваять"
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="js/jquery.js"></script>
<style>
.black {background-color:#000;
border:1px solid black}
.white {background-color:white;
border:1px solid black}
.empty {background-color:white;}
.l {
display:block;
width:100px;
height:100px;
float:left;
margin-right:10px;
border-radius:50px;}
</style>
</head>
<body>
<div class="main">
<div class="1 l black"><a class="left" href="#"><-</a> <a href="#" class="right">-></a></div>
<div class="2 l black"><a class="left" href="#"><-</a> <a href="#" class="right">-></a></div>
<div class="3 l black"><a class="left" href="#"><-</a> <a href="#" class="right">-></a></div>
<div class="4 l"></div>
<div class="5 l white"><a class="left" href="#"><-</a> <a href="#" class="right">-></a></div>
<div class="6 l white"><a class="left" href="#"><-</a> <a href="#" class="right">-></a></div>
<div class="7 l white"><a class="left" href="#"><-</a> <a href="#" class="right">-></a></div>
</div>
<script>
$(".l.black a.right").click(function () {
$('.l').next().addClass('black');
});
$(".l.white a.left").click(function () {
$('.l').prev().addClass('white');
});
</script>
</body>
</html>
Заранее благодарю.