Question

我正在创建一个简单的函数，允许基于精灵的悬停。我不想根据每种可能的汽车类型（紧凑型，敞篷车，SUV等）重复此代码。相反，我想要一个if语句来检查ul是否具有某个ID，如果是，则将变量更改为所述车型之一。此变量将放在img url中。这是我到目前为止的javascript代码。

var img;
                        if (document.getElementById("car")) {
                            var img = "compact";
                        }
                        function rad_glowOn() {
                            document.getElementById("radiator").style.backgroundImage = "url(/af-demo/images/TW/"+img+"-carparts-glow.png)";
                            document.getElementById("healthAlert").style.display = "block";
                        }

这是它引用的HTML。 UL的ID将根据汽车而变化。尚未设置。

<ul id="car">
                        <li id="carLinks">
                            <div id="healthAlert">
                                <p class="healthPopup-Header">Radiator</p>
                                <p>Radiator Leaking.  Lorem Ipsum</p>
                            </div>
                            <a href="#" id="radLink" onmouseover="javascript:rad_glowOn();" onmouseout="javascript:rad_glowOff();">                                 
                            </a>
                            <a href="#" id="engLink" onmouseover="javascript:eng_glowOn();" onmouseout="javascript:eng_glowOff();">
                            </a>
                            <a href="#" id="batLink" onmouseover="javascript:bat_glowOn();" onmouseout="javascript:bat_glowOff();">
                            </a>
                            <a href="#" id="frontWheel" onmouseover="javascript:mec_glowOn();" onmouseout="javascript:mec_glowOff();">
                            </a> 
                            <a href="#" id="backWheel" onmouseover="javascript:mec_glowOn();" onmouseout="javascript:mec_glowOff();">
                            </a>
                            <a href="#" id="passSeat" onmouseover="javascript:mec_glowOn();" onmouseout="javascript:mec_glowOff();">
                            </a>
                            <a href="#" id="driverSeat" onmouseover="javascript:mec_glowOn();" onmouseout="javascript:mec_glowOff();">
                            </a>
                        </li>
                        <li id="radiator">                                        
                        </li>
                        <li id="engine">                                        
                        </li>
                        <li id="battery">                                        
                        </li>
                        <li id="mechanical">    
                        </li>
                    </ul>

汽车类型不是实际的ID或类。我有一个图像列表，变量是图像的第一部分，反映在：

style.backgroundImage = "url(/af-demo/images/TW/"+img+"-carparts-glow.png)";

现在我必须直接指定图像标记：

.style.backgroundImage = "url('/af-demo/images/TW/compact-carparts.png')"

我的目标是使用一个简单的if语句来检查ul的ID，并为img变量赋值，该值将反映到上面。

Answer 1

function rad_glowOn() {
    var thing = this.id.split('Link')[0];
    ...
}

Javascript检查ul ID并相应地更改变量

1 个答案: