Question

假设我有这样的链接

<a href="/like/1" class="like">Like</a>
<a href="/like/2" class="like">Like</a>

我正在编写一个jquery插件来对链接进行ajaxify：

"use strict";

define(['jquery'], function($) {
    $.fn.like_link = function(options){
        var opts = $.extend({}, $.fn.like_link.defaults, options);
        var me = this;

        //attach ajax
        this.click(function(e){
            e.preventDefault();
            $.get(me.attr('href'), function(result){
                if (result == 'like'){
                    me.text(opts.liked_text);
                }else{
                    me.text(opts.like_text);
                }
            });
        });

        return me;
    }

    $.fn.like_link.defaults = {
        like_text: 'Like',
        liked_text: 'Unlike',
    }
});

并使用以下插件：

"use strict";

require(['jquery', 'likes/likes'], function($, _) {
    $('.like').like_link();
});

但它有意想不到的行为，当我点击第一个链接时，它实际上发送了第二个链接的URL，并更改了所有链接的文本。

我的问题是如何将点击事件隔离到每个链接？

Answer 1

咨询同事后，设法正确定位链接：

"use strict";

define(['jquery'], function($) {
    $.fn.like_link = function(options){
        var opts = $.extend({}, $.fn.like_link.defaults, options);
        var me = this;

        //attach ajax
        this.click(function(e){
            e.preventDefault();
            var link = $(e.target);
            $.get(link.attr('href'), function(result){
                if (result == 'like'){
                    link.text(opts.liked_text);
                }else{
                    link.text(opts.like_text);
                }
            });
        });

        return me;
    }

    $.fn.like_link.defaults = {
        like_text: 'Like',
        liked_text: 'Unlike',
    }
});

jquery自定义插件和所有链接

1 个答案: