javascript - 作为汽车配置器控制复杂的 Sprite 图像

Question

我正在做一个个人元素，用户可以在其中在线配置他们的汽车。基础很简单:3 个按钮(更改颜色 - 更改 View - 开/关灯)和以下 Sprite 图像:

如您所见，用户可以在 3 种颜色之间进行选择、更改 View 和打开灯。

到目前为止一切顺利，问题是如何让它成为现实，这就是我目前所拥有的:

$(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(/image/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>

我是 sprites 和 JQuery 的新手，所以我尽力了。这些是以下问题:

1 - 我不知道如何在 Jquery 中“添加”值(假设红色为 0，白色为 1，黑色为 2，我知道如何在 0 和 1 之间切换，但我不知道如何到达代码段中的 2)，您可以看到我看不到黑色。

2 - 如果用户单击“更改颜色”并且最后一种颜色(在本例中为黑色)出现在视口(viewport)上，则 Sprite 必须以某种方式再次以红色开始(这可能与背景重复有关，所以我没有'改变它)。

3 - 如果用户点击“开/关灯”，无论颜色或 View 如何，灯都必须在正确的位置打开/关闭。

这对我来说是一个巨大的元素，所以任何帮助都是可以接受的，我将不胜感激。

Answer 1

让我们创建一个状态并使用它来呈现 View 应该是什么

(顺便说一下，你的黑色 CSS 在 Y 方向上是关闭的)

var colorMap = ['red', 'white', 'black'];
function renderState(state){
  var classString = colorMap[state.color];
  classString += (state.front) ? '-front' : '-back';
  classString += (state.lights) ? '-on' : '-off';
  
  $("#box").removeClass();
  $("#box").addClass(classString);
}
$(document).ready(function(){
    var state = {
      color: 0,
      front: true,
      lights: false,
    }
    renderState(state);
    $("#color").click(function(){
      state.color++;
      state.color %=3;
      renderState(state);
    });
    $("#view").click(function(){
        state.front = !state.front;
        renderState(state);
        
    });
    $("#lights").click(function(){
        state.lights = !state.lights;
        renderState(state);
    });
});

#box{
  width: 113px;
  height: 85px;
  background-image: url(/image/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 -170px;
}

.black-back-off {
  background-position: -226px -170px;
}

.black-front-on {
  background-position: -113px -170px;
}

.black-back-on {
  background-position: -339px -170px;
}

<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>