Question

我使用以下jQuery代码使用户能够为每个帖子竖起大拇指或向下投票：

$('#link0 a').click(function(){
    var href=$(this).attr('href');
    var querystring=href.slice(href.indexOf('?')+1);
    $.post('rate.php', querystring, function(data){
        var newHTML;
        newHTML = data;
        $('#link0').html(data);
    });
    return false; // stop the link
});

$('#link1 a').click(function(){
    var href=$(this).attr('href');
    var querystring=href.slice(href.indexOf('?')+1);
    $.post('rate.php', querystring, function(data){
        var newHTML;
        newHTML = data;
        $('#link1').html(data);
    });
    return false; // stop the link
});

$('#link2 a').click(function(){
    var href=$(this).attr('href');
    var querystring=href.slice(href.indexOf('?')+1);
    $.post('rate.php', querystring, function(data){
        var newHTML;
        newHTML = data;
        $('#link2').html(data);
    });
    return false; // stop the link
});

$('#link3 a').click(function(){
    var href=$(this).attr('href');
    var querystring=href.slice(href.indexOf('?')+1);
    $.post('rate.php', querystring, function(data){
        var newHTML;
        newHTML = data;
        $('#link3').html(data);
    });
    return false; // stop the link
});

如您所见，上面的代码非常重复。它们之间唯一的区别是链接号选择器（#link0，#link1，#link2，#link3等）。如何压缩此代码？

编辑：对不起，我忘了提到我的HTML代码是这样的：

<span id="link0">
Ratings: 
1 <a href="http://blah/rate.php?id=1&ip=2&rating=u">THUMBSUP</a>, 
0 <a href="http://blah/rate.php?id=1&ip=2&rating=d">THUMBSDOWN</a>
</span>

Answer 1

$('#link0, #link1, #link2').each(function(){
    var that = $(this);
    that.find('a').click(function(){
            var href=$(this).attr('href');
            var querystring=href.slice(href.indexOf('?')+1);
            $.post('rate.php', querystring, function(data){
                    var newHTML;
                    newHTML = data;
                    that.html(data);
            });
        return false; // stop the link
    });
});

但你真的应该使用类结构而不是大量的唯一标识符：

$('.links').find('a').click(function(){
        var href = $(this).attr('href');
        var querystring = href.slice(href.indexOf('?')+1);
        $.post('rate.php', querystring, function(data){
                var newHTML;
                newHTML = data;
                $(this).closest('.links').html(data);
        });
    return false; // stop the link
});

（如果我写这篇文章）

$('.links').on('click','a',function(e){
        e.preventDefault();
        var queryString = this.href.slice(this.href.indexOf('?')+1);
        $.post('rate.php', querystring, function(data){
             $(this).parent().html(data);
        });
});

Answer 2

给所有类似class =“linkx”的类，并使用

$(".linkx")代替$("#linka")

更新：代码很可能低于一个

 $('.link a').click(function(){
 var href=$(this).attr('href');
 var querystring=href.slice(href.indexOf('?')+1);   
 var athis = this
 $.post('rate.php', querystring, function(data){
 var newHTML;
 newHTML = data;
 $(athis).parent(".link").html(data); 
 });
 return false; // stop the link
});

Answer 3

假设#link div是他们<a> s的直接父级：

$('[id^="link"] a').click(function(){

    var href = $(this).attr('href');
    var querystring=href.slice(href.indexOf('?')+1);

    var self = this;

    $.post('rate.php', querystring, function(data){

        var newHTML;
        newHTML = data;
        $(self).parent().html(data);

    });

    return false; // stop the link

});

Answer 4

假设#link0 .. #link4是每个锚点最接近的div：

$('#link0 a, #link1 a, #link2 a, #link3 a').click(function(){
    var href=$(this).attr('href');
    var querystring=href.slice(href.indexOf('?')+1);
    var clicked = this;
    $.post('rate.php', querystring, function(data){
        var newHTML;
        newHTML = data;
        $(clicked).closest('div').html(data);
    });
    return false; // stop the link
});

Answer 5

试试这个：

$('#link0, #link1, #link2, #link3').on("click", "a", function(e){
    e.stopPropagation();
    var href=$(this).attr('href');
    var querystring=href.slice(href.indexOf('?')+1);
    $.post('rate.php', querystring, function(data){
        var newHTML;
        newHTML = data;
        $(this).closest('[id^="link"]').html(data);
    });
});

如何将多个类似的事件处理程序压缩为一个？

5 个答案: