Javascript 根据当前背景位置更改背景位置

上周我得到了一个关于如何构建这个脚本的非常有用的答案，除了一个小问题之外，这个脚本非常有效。用视觉辅助最容易解释

这将使用backgroundPosition属性设置颜色更改的动画。唯一的问题是，“喇叭”选项是硬编码的，因此，如果您当前正在观看带有彩色喇叭的白色cab扬声器，并且希望将机柜更改为黑色，则喇叭也会更改为黑色。目前无法查看带有彩色喇叭的黑色驾驶室

要修复它，我需要做一个条件语句，但不知道如何使它工作。差不多

function colorChange() {
    // Use xposition and yposition which are changed by JS function above
    $("#target").css('background-position', xposition+'px '+yposition+'px');
    if$("#target").css('background-position') == {x:-754}
        updatePositions({x:-377});
    if$("#target").css('background-position') == {x:-377}
        updatePositions({x:-754});
}

///EDIT/////// 一位版主刚刚删除了我发布的这个问题的后续内容，以便尝试并帮助找到答案。谢谢您的帮助，主持人先生！我对这个论坛越来越失望。无论如何，我在下面转载了它，希望有人能帮助找到解决方案。

好吧，我有一个答案，但没有工作，但希望它能帮助别人找到一个工作。在对jquery速记做了更多的阅读之后，我尝试为橱柜钢琴样例制作一个单独的函数：

function colorChangePiano() {
    var bp = $("background-position").css;
    $("#target").css("background-position", (bp = {x:-1131}) ? "{x:-377}" : "{x:0}");
}

我知道语法本身有问题，但更大的问题是它没有与驱动其余样例的函数相关联：

// variable outside of function() scope
var xposition, 
    yposition;

// Update values of xposition and or yposition
function updatePositions(axes) {
    // Check to see which axis was passed in x, y or both, then update values
    if (typeof(axes.x) !== 'undefined') xposition = axes.x;
    if (typeof(axes.y) !== 'undefined') yposition = axes.y;

    //Call function to actually move BG image
    colorChange();
}

// Function move BG image, using variables declared above
function colorChange() {
    // Use xposition and yposition which are changed by JS function above   
    $("#target").css('background-position', xposition+'px '+yposition+'px');
}

为了便于阅读，这里有几个html调用示例：

<a href="#" onclick="updatePositions({x:-1131})"><img src="/images/cabinets/swatches/swatch-siren.jpg" /><p>siren</p></a>
<a href="#machine" onclick="updatePositions({y:-999})"><img src="/images/cabinets/swatches/swatch-machine.jpg" /><p>machine</p>
<a href="#" onclick="updatePositions({x:-754})"><img src="/images/cabinets/swatches/swatch-polar.jpg" /><p>polar</p></a></a>
<a href="#" onclick="updatePositions({x:0})"><img src="/images/cabinets/swatches/swatch-piano.jpg" /><p>piano</p></a>

这个网站今晚必须上线，我开始有点发疯了。有人有什么见解吗？

多亏了我的好朋友（也是非常聪明的朋友）伊莱·亨廷顿（Eli Huntington），有了一个答案——尽管答案非常复杂。以下是工作网站的链接，以及与此问题相关的代码片段。希望它能帮助其他可怜的人。这里有一个相关的线程（）和一个更简单的相关问题，我希望得到答案。必须有一个更简单的方法来做到这一点

网站：

脚本：（finishScroll和finishScroll2是与此特定问题无关的localScroll插件函数）

HTML:

喇叭






格栅

---

快乐编码

我想我们中的一些人正在读这篇文章，并且感到非常震惊。看起来那里的代码对于它应该交付的结果来说是过度杀伤力。如果我发现一些令人困惑的事情超出了希望，我通常会重写它。这就是我向你推荐的。重做代码，以便在将来发生更改时更易于理解和使用。抱歉，但这是我能给的最好的回答。哈哈，好吧，至少谢谢你的回答。我仍然感到惊讶的是，没有简单的方法来检查背景位置并基于此更新轴。我不确定它是否清晰，但当前的函数可以完美地工作，除了这一个样例。因为喇叭颜色调用精灵的特定x轴，所以它只允许您选择带白色驾驶室的彩色喇叭。我需要弄清楚如何通过检查，并根据检查结果提供不同的值

// FINISHES SCRIPT //
// Make an object to hold various information about the application
finishes = {

cabinets: { // Columns
    colors: ['polar', 'piano'], // Add new cabinet colors here

    /*
     * New cabinet colors are represented in columns and can be 
     * added to the sprite to the right edge.
     * After adding two new columns  to the Sprite
     * add the following after polar_custom: '-1131px' (don't forget comma):
     * 
     *      anycolor_standard: '-1508px' //(i'm guessing)
     *      anycolor_custom:   '-1885px' //(also guessing)
     * 
     */
    piano_standard  : '0px',   // Column where horn matches grill
    piano_custom    : '-377px', // Column where horn is custom color
    polar_standard  : '-754px',
    polar_custom    : '-1131px'
},
colors: { // Rows
    // New colors can be added to the sprite at the bottom and then added last here with the position (from the sprite)
    siren:      '0px',
    medallion:  '-333px',
    starlight:  '-666px',
    machine:    '-999px'
},
current_cabinet_color: 'piano',  // Will be updated by click events to updateCabinet
current_grille_color: 'siren',  // Will be udpated by click events to updateCabinet
current_horn_color: 'standard'  // Will be udpated by click events to updateCabinet

};

function updateCabinet(component, color) {
if(!component || !color) return false;  // Exit if missing values

// Take component and update the 'finishes' object above based on which part we are changing
switch(component) {
    case 'cabinet':
        finishes.current_cabinet_color = color;
        break;
    case 'horn':
        if(color != 'piano' && color != 'polar') {
            finishes.current_horn_color = 'custom';
        } else {
            finishes.current_horn_color = 'standard';
        }
        break;
    case 'grille':
        finishes.current_grille_color = color;
        break;
    default:
        return false;  // Invalid component name passed in
}

// Now that we have updated the 'finishes' object, we can get our xpos and ypos values from it
xpos = finishes.cabinets[finishes.current_cabinet_color + '_' + finishes.current_horn_color];
ypos = finishes.colors[finishes.current_grille_color];

// Finally make sure we have good values for xpos and ypos and do the CSS udpate
if(xpos && ypos) {
    $('#target').css('background-position', xpos+' '+ypos );
}
return true;
}

<!-- FINISHES -->
<div id="finishes" class="item"><a name="finishes"></a>
    <div id="swatches" class="content">
        <div class="finishscroll">
            <p class="text">Avalon by EAW represents a radical departure from any dance club loudspeaker ever created, including our own original Avalon Series. Everything about Avalon by EAW breaks new ground. The system design turns the loudspeaker inside-out, mounting the MF/HF horn outside the grille. And the grille - concave and sculpted in clean, straight lines - expresses the symmetry that unifies the design.</p>
            <div id="target"></div>
            <div id="label-cab" class="label">cabinet</div>
            <ul id="swatch-cab" class="swatch">
                <li class="patch"><a href="#piano" onclick="updateCabinet('cabinet','piano')"><img src="/images/cabinets/swatches/swatch-piano.jpg" /><p>piano</p></a></li>
                <li class="patch"><a href="#polar" onclick="updateCabinet('cabinet','polar')"><img src="/images/cabinets/swatches/swatch-polar.jpg" /><p>polar</p></a></li>
            </ul>
            <div id="label-horn" class="label">horn</div>
            <div id="content-finishscroll" class="swatch">
                <div class="scroll-section">
                    <ul>
                        <li id="piano" class="patch">
                            <a href="#" onclick="updateCabinet('horn','piano')"><img src="/images/cabinets/swatches/swatch-piano.jpg" /><p>piano</p></a>
                        </li>
                        <li id="polar" class="patch">
                            <a href="#" onclick="updateCabinet('horn','polar')"><img src="/images/cabinets/swatches/swatch-polar.jpg" /><p>polar</p></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="finishscroll2">
            <div id="label-grille" class="label">grille</div>
            <ul id="swatch-grille" class="swatch">
                <li class="patch"><a href="#siren" onclick="updateCabinet('grille','siren')"><img src="/images/cabinets/swatches/swatch-siren.jpg" /><p>siren</p></a></li>
                <li class="patch"><a href="#medallion" onclick="updateCabinet('grille','medallion')"><img src="/images/cabinets/swatches/swatch-medallion.jpg" /><p>medallion</p></a></li>
                <li class="patch"><a href="#starlight" onclick="updateCabinet('grille','starlight')"><img src="/images/cabinets/swatches/swatch-starlight.jpg" /><p>starlight</p></a></li>
                <li class="patch"><a href="#machine" onclick="updateCabinet('grille','machine')"><img src="/images/cabinets/swatches/swatch-machine.jpg" /><p>machine</p></a></li>
            </ul>
            <div id="content-finishscroll2">
                <div class="swatch" style="width:73px;">
                    <ul>
                        <li id="siren" class="patch">
                        <a href="#" onclick="updateCabinet('horn','siren')"><img src="/images/cabinets/swatches/swatch-siren.jpg" /><p>siren</p></a>
                        </li>
                        <li id="medallion" class="patch">
                        <a href="#" onclick="updateCabinet('horn','medallion')"><img src="/images/cabinets/swatches/swatch-medallion.jpg" /><p>medallion</p></a>
                        </li>
                        <li id="starlight" class="patch">
                        <a href="#" onclick="updateCabinet('horn','starlight')"><img src="/images/cabinets/swatches/swatch-starlight.jpg" /><p>starlight</p></a>
                        </li>
                        <li id="machine" class="patch">
                        <a href="#" onclick="updateCabinet('horn','machine')"><img src="/images/cabinets/swatches/swatch-machine.jpg" /><p>machine</p></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div style="position:absolute; top:450px; left:-60px"><img src="http://avalon.eaw.com/images/shadow-finishes.png" /></div>
    </div>
</div><!-- #finishes -->