jquery - 如何优化我的 JavaScript 代码？

Question

已关闭。此问题不符合 Stack Overflow guidelines 。目前不接受答案。

---

这个问题似乎与 help center 中定义的范围内的编程无关。 .

已关闭 9 年前。

Improve this 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>

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

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

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