2

我正在使用以下 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>
4

5 回答 5

2 
$('#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);
        });
});
于 2012-09-29T22:12:05.507 回答
1

给他们所有相同的类，如 class="linkx" 并使用

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

更新：代码很可能低于1

 $('.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
});
于 2012-09-29T22:11:10.873 回答
1

假设#linkdiv 是其<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

});
于 2012-09-29T22:16:19.480 回答
0

假设#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
});
于 2012-09-29T22:11:49.813 回答
0

试试这个：

$('#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);
    });
});
于 2012-09-29T22:16:08.757 回答