0

私はjavascriptが初めてで、縦型メニューを書こうとしています。この時点で、リスト項目をクリックすると div の内容が変更されるように動作しています。問題は、私が書いた JavaScript がまったく最適化されていないことを知っているということです。

たとえば、リストに別の項目を追加したい場合、既存のスクリプトに大量のコードを追加する必要があります。より少ないコードで同じことを行う、ある種のケース/スイッチまたはif/elseフレームワークを使用するためのガイダンスを誰かが教えてくれたらうれしいです. 私はいくつかの異なることを試しましたが、どれも私が望むようには機能しませんでした.

ここに私が今行っていることのセクションがあります。Div #2-5 はロード時に非表示になり、各リスト項目にはクリック機能があり、他の div の非表示または表示を個別に切り替えます。

$(document).ready(function(){
$('#feature2').hide();
$('#feature3').hide();
$('#feature4').hide();
$('#feature5').hide();

$('.feature1').click(function(){ 
$('#feature2').hide();
$('#feature3').hide();
$('#feature4').hide();
$('#feature5').hide();
$('#feature1').show();
});
$('.feature2').click(function(){ 
$('#feature1').hide();
$('#feature3').hide();
$('#feature4').hide();
$('#feature5').hide();
$('#feature2').show();
}); 
etc.

最適化しようとしているコードを含む jsFiddle は次のとおりです: http://jsfiddle.net/7PTUu/10/

ありがとう！

4

2 に答える 2

4

各リンク要素と非表示/表示する div に、共通の CSS クラス (「feature-link」、「feature」など) を指定します。次にhref、各リンクの属性を、表示または非表示にする必要がある要素の ID に設定します。このようにして、1 つの単純なハンドラーでこれらすべてを実現できます。

HTML の例:

<!-- in your vertical menu -->
<a class="feature-link" href="#feature1">Feature 1</a>
<a class="feature-link" href="#feature2">Feature 2</a>

<!-- the features you want to show/hide -->
<div class="feature" id="feature1">...</div>
<div class="feature" id="feature2">...</div>

JavaScript の例:

// Same logic applies to all links.
$(".feature-link").click(function() {

  // Get the feature we want to show.
  var target = $(this).attr("href");

  // Hide all other feature elements
  $(".feature").hide();

  // Show just the one div.
  $(target).show();

  // This is personal preference; I put this here to prevent the ID
  // from being appended to the URL in the browser's address bar.
  return false;
});

そして、ここで遊ぶ jsFiddleがあります。

于 2013-06-13T17:53:38.530 に答える
3

最速の解決策 (最適ではありません):

$(document).ready(function() {
    function hideDivs() {
        $('#feature1, #feature2, #feature3, #feature4, #feature5').hide();
    }
    hideDivs();

    $('.feature1').click(function(){ 
        hideDivs();
        $('#feature1').show();
    });

    $('.feature2').click(function(){ 
        hideDivs();
        $('#feature2').show();
    }); 
    ...
于 2013-06-13T17:50:55.380 に答える