javascript - ul IDをチェックし、それに応じて変数を変更するJavascript

Question

スプライトに基づいてホバーできる単純な関数を作成しています。考えられるすべての車種（コンパクト、コンバーチブル、SUVなど）に基づいてこのコードを繰り返したくありません。代わりに、ulに特定のIDがあるかどうかを確認し、ある場合は変数を上記の車種の1つに変更するifステートメントが必要です。この変数はimgurlに配置されます。これが私がこれまでに持っている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')"

私の目標は、ulのIDをチェックし、上記に反映されるimg変数に値を割り当てる単純なifステートメントを作成することです。

Answer 1

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