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

div がそのs の#link直接の親であると仮定します。<a>

$('[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 に答える
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 に答える
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 に答える
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 に答える