如何优化我的javascript代码？

Question

我创建了以下jquery切换框显示/隐藏功能.但我知道我有冗余代码,我希望尽可能简短有效.这只是我的尝试学习代码权弗朗开始...

HTML:

<div>
    <ul>
        <li><a id="areaPta">Pretoria</a></li>
        <li><a id="areaPotch">Potch</a></li>
        <li><a id="areaJhb">JHB</a></li>
    </ul>
</div>
<div>
    <div class="hidden" id="pretoriaDetail">Pretoria Content</div>
    <div class="hidden" id="potchDetail">Potch Content</div>
    <div class="hidden" id="jhbDetail">JHB Content</div>
</div>

CSS:

.hidden{
    display: none;
}

JS:

$(function() {

    var p = $('#areaPta');
    var po = $('#areaPotch');
    var j = $('#areaJhb');

    p.click(function (){
        $('.hidden').hide(500);
        $('#pretoriaDetail').show(500);
    });
    po.click(function (){
        $('.hidden').hide(500);
        $('#potchDetail').show(500);
    });
    j.click(function (){
        $('.hidden').hide(500);
        $('#jhbDetail').show(500);
    });

});

Answer 1

您的标记应尽可能指定元素之间的关系,而不是在JavaScript中手动编码此数据.您可以使用href每个<a>标记的属性来指定<a>标记要影响的元素的ID :

<div>
    <ul id="nav">
        <li><a id="areaPta" href="#pretoriaDetail">Pretoria</a></li>
        ...
    </ul>
</div>
<div>
    <div class="hidden" id="pretoriaDetail">Pretoria Content</div>
    ...
</div>

然后使您的点击绑定更加通用:

$("#nav a").click(function(event) {
  event.preventDefault();

  $(".hidden").hide(500);
  $($(this).attr("href")).show(500)
});