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)
});

Answer 2

我在http://jsfiddle.net/jagzviruz/w3hqe/1/创建了一个JS小提琴，它可以指导您如何在创建更有意义的标记的同时最小化代码行。请注意，这确实会创建多个点击处理程序。你可以通过在包裹链接的ul上创建一个.on()处理程序来做得更好。

HTML

<div>
  <ul>
    <li><a id="areaPta" href="#" rel="pretoriaDetail">Pretoria</a></li>
    <li><a id="areaPotch" href="#" rel="potchDetail">Potch</a></li>
    <li><a id="areaJhb" href="#" rel="jhbDetail">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;
}
ul li a{
    text-decoration:none;
}

JS

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

p.click(function (e) {
    var targ = $('#'+$(this).attr('rel')) ;
    e.preventDefault();
    $('.hidden').hide(500)
    targ.show(500);    
});

Answer 3

这是一种方法，使用您当前的标记（我确实将ID大写，以便匹配） - http://jsfiddle.net/D3e4d/3/

$('a').click(function(e) {
    e.preventDefault();
    var clicked = $(this).text();
    $('.hidden').hide(500);
    $('[id^="' + clicked + '"]').toggle(500);
});

Answer 4

您可以编写一个通用的处理函数，只需对标记稍作更改即可。见下文，

<ul id="mylinks">
    <li><a id="areaPta" data-content-id="pretoriaDetail">Pretoria</a></li>
    <li><a id="areaPotch" data-content-id="potchDetail">Potch</a></li>
    <li><a id="areaJhb" data-content-id="jhbDetail">JHB</a></li>
</ul>

然后是剧本，

$('#mylinks a').click (function () {
   $('.hidden').hide(500);
   $('#' + $(this).data('content-id')).show(500);
});

Answer 5

对于初学者，我通常声明返回带有$前缀的jquery对象的变量：

var $p = $('#areaPta');

但是当它们只使用一次时，没有必要将它们存储到变量中。

在我看来，你的代码还可以。我能想到的唯一可以降低减少量的东西就是：

<a id="areaPta" data-target="pretoriaDetail">Pretoria Content</a>

$('li a').on('click', function(e){

    var target = $(e.target).data('target');

    $('#' + target).fadeIn(500);
});

Answer 6

你在这里做的事我会按照以下方式做：

HTML：

<div>
    <ul>
        <li><a class="whateverClass">Pretoria</a></li>
        <li><a class="whateverClass">Potch</a></li>
        <li><a class="whateverClass">JHB</a></li>
    </ul>
</div>
<div>
    <div class="hidden">Pretoria Content</div>
    <div class="hidden">Potch Content</div>
    <div class="hidden">JHB Content</div>
</div>

CSS：

.hidden{
    display: none;
}

JS：

//This will shorten things up for you a bit.
$(function() {
    $(".whateverClass").click(function (){
        //Fixed a bug here
        $('.hidden').hide(500);
        $(this).find('.hidden').show(500);
    });
});

但是，我不想了解为什么你想要这种确切的行为，但至少它更短，更容易维护。

如何优化我的javascript代码？

6 个答案: