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>要素の ID を指定できます。<a>

<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 フィドルを作成しました。これにより、より意味のあるマークアップを作成しながらコード行を最小限に抑える方法を説明できます。これにより、複数のクリック ハンドラーが作成されることに注意してください。.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

$手始めに、私は通常、プレフィックス付きの 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 に答える
1

現在のマークアップを使用する 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 に答える
-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 に答える