javascript - jquery变量？

Question

我是 jQuery 新手，我编写了以下 jQuery 以在显示 map 上的特定链接时显示 div:

<div id="locationmap">
    <a class="linkhide" id="link1" href="#">Occupier 1</a>
    <a class="linkhide" id="link2" href="#">Occupier 2</a>
    <a class="linkhide" id="link3" href="#">Occupier 3</a>
</div>  
<div id="mapdetail">
    <div class="hideme" id="local1" style="display:none;">
        <p>Some content one</p>
    </div>
    <div class="hideme" id="local2" style="display:none;">
        <p>Some content two</p>
    </div>
    <div class="hideme" id="local3" style="display:none;">
        <p>Some content three</p>
    </div>    
</div>

<script type='text/javascript'>//<![CDATA[
    $("#link1").mouseover(function() { $("#local1").fadeIn(500); });
    $("#link2").mouseover(function() { $("#local2").fadeIn(500); });
    $("#link3").mouseover(function() { $("#local3").fadeIn(500); });

    $(".linkhide").mouseout(function() { $(".hideme").css('display','none'); });
//]]>
</script>

但是，如您所见，每个链接都会重复 .fadeIn(500)。我如何使它成为一个变量一次并为每一行调用它？这将节省我为每个链接重复同一段代码 30 次左右的时间。

我这里有一个 JSfiddle:http://jsfiddle.net/karlgoldstraw/4NRY7/

谢谢。

Answer 1

function mouseOver(localId) {
    return function() { $("#local" + localId).fadeIn(500); }
}

 $("#link1").mouseover(mouseOver(1));