代码之家  ›  专栏  ›  技术社区  ›  ewall

帮助将一些原型JavaScript移植到jQuery

  •  0
  • ewall  · 技术社区  · 15 年前

    我已经使用 example code for the will_paginate plugin --显然是在用原型。

    但是,如果我想切换到使用jQuery进行将来的添加,我真的不想让原型的东西也坐在那里(是的,我知道) it's possible ). 我已经好几年没有写过一点JavaScript了,更不用说研究Prototype和jQuery了。。。所以我需要一些帮助来将这个位转换成jQuery兼容的语法:

    document.observe("dom:loaded", function() {
      // the element in which we will observe all clicks and capture
      // ones originating from pagination links
      var container = $(document.body)
    
      if (container) {
        var img = new Image
        img.src = '/images/spinner.gif'
    
        function createSpinner() {
          return new Element('img', { src: img.src, 'class': 'spinner' })
        }
    
        container.observe('click', function(e) {
          var el = e.element()
          if (el.match('.pagination a')) {
            el.up('.pagination').insert(createSpinner())
            new Ajax.Request(el.href, { method: 'get' })
            e.stop()
          }
        })
      }
    })
    

    提前谢谢!


    编辑: nickcraver的回答让我获得了90%的成功,所以我只需要选择足够的jQuery来替换HTML元素。代替尼克的那条线 $.get($(this).attr("href"));

    $.get(this.href, null, function(data){ $(this).html(data); }, 'html');
    
    1 回复  |  直到 13 年前
        1
  •  1
  •   Nick Craver    15 年前

    您可以在jQuery中将其缩短为:

    $(function() {
      $('.pagination a').live('click', function(e) {
        $(this).parent('.pagination')
               .append("<img src='/images/spinner.gif' class='spinner' />");
        $.get($(this).attr("href"));
        return false;
      });
    });
    

    我不完全确定 new Ajax.Request(el.href, { method: 'get' }) 不过,这是请求的脚本吗?返回后内容似乎没有任何处理。