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

Javascript to check ul ID and change a variable accordingly

本文关键字:改变 变量 检查 ul ID Javascript      更新时间:2023-09-26

我正在创建一个简单的函数,它允许基于精灵的悬停。我不想根据每一种可能的车型(紧凑型、敞篷车、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="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变量分配一个值,该值将反映在上面。

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