Question

我的问题很简单。这是我的代码，我发现它们是两个相似的，我怎样才能改进/缩短这段代码？

我发现它们在许多方面都很相似，这就是我在这里问的原因。

这是我的代码，感谢任何帮助。

$(".follow-link").click(function(event) {
    event.preventDefault();
    var therel = $(this).attr('rel');
    var followID = $(this).attr('rel').replace(/[^0-9]/g, '');
    var thisfollow = $(this);
    $.ajax({
        url: '/ajax/follow.php',
        type: 'POST',
        data: {followwho : followID},
        dataType: 'json',
        success: function(data){
            if (data.status) {
                $('a[rel="' + therel + '"]').hide();
                $('a[rel="' + therel + '"]').parent().children('.unfollow-link').fadeIn();
            }
        }
    });
});

$(".unfollow-link").click(function(event) {
    event.preventDefault();
    var therel = $(this).attr('rel');
    var followID = $(this).attr('rel').replace(/[^0-9]/g, '');
    var thisfollow = $(this);
    $.ajax({
        url: '/ajax/unfollow.php',
        type: 'POST',
        data: {followwho : followID},
        dataType: 'json',
        success: function(data){
            if (data.status) {
                $('a[rel="' + therel + '"]').hide();
                $('a[rel="' + therel + '"]').parent().children('.follow-link').fadeIn();
            }
        }
    });
});

Answer 1

创建一个常用函数并在该函数中进行一些简化清理工作：

function followAjax(event, sel, phpurl) {
    event.preventDefault();
    var thisfollow = $(this);
    var therel = thisfollow.attr('rel');
    var followID = therel.replace(/[^0-9]/g, '');
    $.ajax({
        url: phpurl,
        type: 'POST',
        data: {followwho : followID},
        dataType: 'json',
        success: function(data){
            if (data.status) {
                $('a[rel="' + therel + '"]').hide().parent().children(sel).fadeIn();
            }
        }
    });
}

$(".unfollow-link").click(function(event) {
    followAjax.call(this, event, ".follow-link", '/ajax/unfollow.php')
});
$(".follow-link").click(function(event) {
    followAjax.call(this, event, ".unfollow-link", '/ajax/follow.php')
});

Answer 2

您可以在两个处理程序中使用相同的函数，查找this.className（或使用jQuery：$(this).hasClass）并执行相应的操作。或者您使用两个函数，在闭包中生成它们：

$(".follow-link").click(makeHandler("follow"));
$(".unfollow-link").click(makeHandler("unfollow"));

function makeHandler(action) {
    return function(event) {
        event.preventDefault();
        var therel = $(this).attr('rel');
        var followID = $(this).attr('rel').replace(/[^0-9]/g, '');
        var thisfollow = $(this);
        $.ajax({
            url: '/ajax/'+action+'.php',
            type: 'POST',
            data: {followwho : followID},
            dataType: 'json',
            success: function(data){
                // no need to ask for data.status
                $('a[rel="' + therel + '"]').hide();
                $('a[rel="' + therel + '"]').parent().children(action=="follow"
                    ? '.unfollow-link'
                    : '.follow-link'
                ).fadeIn();
            }
        });
    };
}

如何改进/缩短这两个类似的ajax请求？

2 个答案: