1

我创建了以下 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);
    });

});
4

6 回答 6

8

您的标记应尽可能指定元素之间的关系，而不是在 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)
});
于 2013-02-19T19:56:40.453 回答
2

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

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);    
});
于 2013-02-19T20:05:56.797 回答
1

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

$('a').click(function(e) {
    e.preventDefault();
    var clicked = $(this).text();
    $('.hidden').hide(500);
    $('[id^="' + clicked + '"]').toggle(500);
});
于 2013-02-19T19:59:28.253 回答
1

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

<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);
});
于 2013-02-19T19:59:30.307 回答
1

对于初学者，我通常声明返回带有$前缀的 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);
});
于 2013-02-19T20:00:32.457 回答
-3

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

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

但是，我不想深入了解您为什么想要这种确切的行为，但至少它更短且更易于维护。

于 2013-02-19T20:01:36.867 回答