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

基本上，您需要考虑一些做法：

  • 缓存你的选择器，尤其是重复的东西
  • 避免去dom和凭记忆工作
  • 使用普通的 js 数组循环或方法来避免额外的选择器，如 :first 或 :last，你已经有了数据
  • 直接停止事件，不返回false
  • .getElement()将返回第一场比赛
  • 避免将内容存储到您不会重复使用的变量中
  • 考虑使用事件委托并将点击处理程序附加到 ul 而不是所有子 A 上 - 例如，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 回答