Я делаю личный проект, в котором пользователь может настроить внешний вид автомобиля в Интернете.
Основа проста: 3 кнопки (Change Color
- Change View
- Lights On/Off
) и следующее изображение спрайта:
Как вы можете видеть, пользователь может выбирать между 3 цветами, изменять вид и включать фары и габаритные огни.
Пока все хорошо, проблема заключается в том, чтобы сделать это реально выполнимо.
Ниже код, который у меня есть до сих пор:
$(document).ready(function(){
$("#color").click(function(){
$('#box').toggleClass('white-front-off');
});
$("#view").click(function(){
$('#box').toggleClass('red-back-off');
});
$("#lights").click(function(){
$('#box').toggleClass('red-front-on');
});
});
#box{
width: 113px;
height: 85px;
background-image: url(https://i.stack.imgur.com/WNsgN.jpg);
}
.red-front-off {
background-position: 0px 0px;
}
.red-back-off {
background-position: -226px 0px;
}
.red-front-on {
background-position: -113px 0px;
}
.red-back-on {
background-position: -339px 0px;
}
.white-front-off {
background-position: 0px -85px;
}
.white-back-off {
background-position: -226px -85px;
}
.white-front-on {
background-position: -113px -85px;
}
.white-back-on {
background-position: -339px -85px;
}
.black-front-off {
background-position: 0px -85px;
}
.black-back-off {
background-position: -226px -85px;
}
.black-front-on {
background-position: -113px -85px;
}
.black-back-on {
background-position: -339px -85px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box" class="red-front-off"></div>
<button id="color">Change Color</button>
<button id="view">Change View</button>
<button id="lights">Lights On/Off</button>
Я новичок в спрайтах и JQuery
, поэтому сделал все возможное, что смог, при этом возникли проблемы:
Перечень проблем:
Я не знаю, как добавить значения в
JQuery
(представьте, что красный цвет равен0
, белый -1
, а черный -2
, я знаю, как переключаться между0
и1
, но я не знаю, как достичь2
) В фрагменте кода вы видите, что я не вижу черный цвет.Если пользователь нажимает
change color
, а последний цвет (в данном случае черный) находится на экране, то как-то спрайт должен начинаться снова с красного цвета (это может быть возможно с повторением фона).Если пользователь нажимает
Lights On/Off
независимо от цвета или вида, свет должен включаться / выключаться в правильном положении.