0

jquery を使用するコードがいくつかあります。

$(document).ready(function(){
   $('#tabs div').hide();
   $('#tabs div:first').show();
   $('#tabs ul li:first').addClass('active');
   $('#tabs ul li a').click(function(){ 
      $('#tabs ul li').removeClass('active');
      $(this).parent().addClass('active'); 
      var currentTab = $(this).attr('href'); 
      $('#tabs div').hide();
      $(currentTab).show();
      return false;
   });
});

そして、mootoolsを使用するように変換しました

window.addEvent('domready', function() {
    $$('#tabs div').hide();
    $$('#tabs div:first').show();
    $$('#tabs ul li:first').addClass('active');
    $$('#tabs ul li a').addEvent('click', function(event) {
        $$('#tabs ul li').removeClass('active');
        $$(this).parent().addClass('active'); 
        var currentTab = $(this).attr('href'); 
        $$('#tabs div').hide();
        $$(currentTab).show();
        return false;

    });
});

しかし、私はエラーが発生します:$$(this).parent is not a function

どうすれば修正できますか？

4

2 に答える 2

2

これはかなり悪いです。多くの悪い慣行と API の違い。

window.addEvent('domready', function() {
    // cache what we will reuse into vars
    var tabs = document.id('tabs'), 
        divs = tabs.getElements('div'),
        // for loop
        len = divs.length,
        ii = 1;

    // hide all but the first one w/o extra lookups.
    for (;ii < len;++ii)
        divs[ii].hide();

    // first match
    tabs.getElement('ul li').addClass('active');

    // attach the events to all links
    tabs.getElements('ul li a').addEvent('click', function(event) {
        event && event.stop();

        tabs.getElement('ul li').removeClass('active');
        this.getParent().addClass('active'); 
        tabs.getElement(this.get('href')).show();
        return false;
    });
});

基本的に、考慮する必要があるいくつかのプラクティス:

  • セレクター、特に反復的なものをキャッシュします
  • ドムに行くのを避け、記憶から作業する
  • 通常の js 配列ループまたはメソッドを使用して、:first や :last などの余分なセレクターを回避します。データは既にあります。
  • イベントを直接停止し、false を返さないでください
  • .getElement()最初の一致を返します
  • 再利用しない変数に何かを保存することは避けてください
  • イベント委任を使用し、すべての子 A ではなく ul にクリック ハンドラーを 1 回アタッチすることを検討してください。たとえば、tabs.getElement('ul').addEvent('click:relay(li a)', fn)同じことを達成しますが、単一のイベント ハンドラーしか作成しません。
于 2012-05-29T08:39:12.177 に答える
0

mootoolsにはメソッドはありませんparent。代わりに、メソッド名はgetParent.jqueryからmootoolsに変換するのは難しくありません。ドキュメントを見ると役に立ちます。

于 2012-06-11T16:33:29.897 に答える