0

以下のように6回書き直すのではなく、どうすればこのコードを1つの関数にできるのか疑問に思っていました。私はこのようなもので恐ろしいです。私はそれを行う方法があると確信しています。私にはわかりません。どんな助けでも素晴らしいでしょう。

    (function() {
    $('.one').click(function() {
      $('.glennpage').show();
      $('.emmapage').hide();
      $('.brodiepage').hide();
      $('.laurenpage').hide();
      $('.mattpage').hide();
      $('.jeremypage').hide();
    });
  });
$(function() {
    $('.two').click(function() {
      $('.glennpage').hide();
      $('.emmapage').show();
      $('.brodiepage').hide();
      $('.laurenpage').hide();
      $('.mattpage').hide();
      $('.jeremypage').hide();
    });
});
$(function() {
    $('.three').click(function() {
      $('.glennpage').hide();
      $('.emmapage').hide();
      $('.brodiepage').show();
      $('.laurenpage').hide();
      $('.mattpage').hide();
      $('.jeremypage').hide();
    });
});
$(function() {
    $('.four').click(function() {
      $('.glennpage').hide();
      $('.emmapage').hide();
      $('.brodiepage').hide();
      $('.laurenpage').show();
      $('.mattpage').hide();
      $('.jeremypage').hide();
    });
});
$(function() {
    $('.five').click(function() {
      $('.glennpage').hide();
      $('.emmapage').hide();
      $('.brodiepage').hide();
      $('.laurenpage').hide();
      $('.mattpage').show();
      $('.jeremypage').hide();
    });
});
$(function() {
    $('.six').click(function() {
      $('.glennpage').hide();
      $('.emmapage').hide();
      $('.brodiepage').hide();
      $('.laurenpage').hide();
      $('.mattpage').hide();
      $('.jeremypage').show();
    });
});
4

4 に答える 4

3

1 つの関数を追加することで、コードを短縮できます。

function hideAll() {
      $('.glennpage').hide();
      $('.emmapage').hide();
      $('.brodiepage').hide();
      $('.laurenpage').hide();
      $('.mattpage').hide();
      $('.jeremypage').hide();
}

次に、あなたのクリックのために：

$(function() {
    $('.three').click(function() {
      hideAll();
      $('.brodiepage').show();
    });
});
于 2012-11-14T02:49:15.077 に答える
2

HTML に HTML-5 データ属性を含めることができます。

$(function() {
    $('.one,.two,.three,.four,.five , .six ').on('click' , function() {
        $('.glennpage,.emmapage,.brodiepage,.laurenpage , 
                                .mattpage,.jeremypage ').hide() ;   
       // Hide All

        var class = $(this).data('class');
        $('.'+class).show();
    });
});

.one 、 .two が div であると仮定すると、それらに data-class 属性を追加します。

<div class="one" data-class="glennpage"​​​​​​​​​​ ></div>

<div class="two" data-class="emmapage" ></div>​

.. 等々

より良いアプローチは、問題のすべての要素に共通のクラスを持たせることであり、それによって物事も成し遂げられるはずです。

于 2012-11-14T02:52:33.697 に答える
2

これは現在の設定で動作するはずです:

var $names = $('.glennpage, .emmapage, .brodiepage, .laurenpage, .mattpage, .jeremypage'),
    classes = ['one', 'two', 'three', 'four', 'five', 'six'];
$.each( classes, function( i,v ) {
  $('.'+ v).click(function() { $names.hide().eq( i ).show(); });
});

非セマンティックなクラス「one」、「two」などを取り除き、それらすべてに対して意味のあるクラスを 1 つだけ使用し、ページ要素をインデックスでターゲットにすることをお勧めします。

于 2012-11-14T03:00:50.107 に答える
2

まず、複数の document.ready 関数があり、それらを 1 つに組み合わせることができます。

$(function() {
    $('.one').click(function() {

    });
    $('.two').click(function() {

    });
    $('.three').click(function() {

    });
    etc...
});

@Shivan Raptorが言及しているように、コードの表示/非表示を1つの関数に移動できます。しかし、@Shivan Raptor のコード関数の問題は、選択したすべての要素を隠しているだけであり、これはあなたがしようとしていることではないようです。あなたが持っているものに基づいて、タブのセットのようなことをしようとしているように見えます.1つをクリックすると、特定のタブセクションが表示され、他のすべてが非表示になります。次のタブをクリックすると、対応するタブセクションが表示され、他のすべてが非表示になります...

それが目的である場合は、各 html 要素に ID を追加することをお勧めします。したがって、これを行う代わりに：

<div class='glennpage'></div>
<div class='emmapage'></div>
<div class='brodiepage'></div>
etc...

これを行います：クラスを追加して、一度にすべてを簡単に選択できるようにします

<div id='glennpage' class="tabContent"></div>
<div id='emmapage' class="tabContent"></div>
<div id='brodiepage' class="tabContent"></div>
etc...

次に、ボタン要素 (またはトリガーの要素) で .one、.two、.three などを使用する代わりに、tabContent セクションの 1 つで ID の 1 つに一致するクラスを使用します。

<button class="glennpage"></button>
<button class="emmapage"></button>
<button class="brodiepage"></button>
etc...

これで、jquery を次のように書き換えることができます。

$('.one','.two','.three','.four','.five','.six').click(function() {
    $('.tabContent').hide();
    $(this).find('#' + $(this).attr('id')).show();
});

ボタンの 1 つをクリックすると、jquery はすべてのセクションである .tabContent のクラスを持つすべての要素を非表示にし、対応する ID を持つ要素を探して表示します。それが役立つことを願っています!

于 2012-11-14T03:17:10.617 に答える