0

タイトルがわかりにくいかもしれません。申し訳ありません。これが私の問題です。

forループを使用してインデックスページに投稿をレンダリングします。すべての投稿には、上下に投票するオプションがあります。これらの投票リクエストを ajax 経由で送信したいと考えています。しかし、コードを書くと、ページ内の最初のコンテンツに対してのみ ajax がうまく機能しました。以下、動作しません。forループを使用すると、同じIDの投稿が複数あることに気付きました。そのため、ajax と html は他のコンテンツを無視します。

ここに私のコードがあります

index.html:

<ul>
    {% for post in posts %}
     <li>
      <input type="hidden" value="{{post.id}}" id="post_id" />
      {{ post.title }}
      <a href="javascript:" id="vote_up">VOTE UP</a>
      <a href="javascript:" id="vote_down">VOTE DOWN</a>
      <button id="current_vote"> {{ post.vote }} </button>
    </li>
    {% endfor %}
</ul>

およびjs側：

$( function (){                                                                      
 49     var post_id = $('#post_id').val();                                               
 50     $('#vote_up').click( function(){                                                 
 51         var vote = 1;                                                                
 52         var ajaxOpt = {                                                              
 53             type: 'post',                                                            
 54             url: '/content/vote/',                                                   
 55             data: {                                                                  
 56                 'vote': vote,                                                        
 57                 'post_id': post_id,                                                  
 58                 },                                                                   
 59             success: function(data){                                                 
 60                 $('#current_vote').text(data.vote_new);                                
 61                 },                                                                   
 62             error: function(){                                                       
 63                 console.log('error :[');                                             
 64                 }                                                                    
 65         };                                                                           
 66         $.ajax(ajaxOpt);                                                             
 67         return false;                                                                
 68                                                                                      
 69         })
            // same code for vote_down                                                                           
 89 })

私のやり方に何か問題があると思います。私は何をすべきか？

ありがとうございました。

4

1 に答える 1

5

これは投票の例にすぎません。ここから始めて、次に投票することができます：

<ul>
    {% for post in posts %}
    <li>
       {{ post.title }}
       <a href="/content/vote/{{post.id}}/" class="vote_up" data-id="{{post.id}}">VOTE UP</a>
       <button id="current_vote"> {{ post.vote }} </button>
    </li>
    {% endfor %}
</ul>

<script>
$(document).ready(function(){
    $('.vote_up').click(function(){
        var post_id = $(this).attr('data-id');
        var url = $(this).attr('href');
        $.getJSON(url, function(data){});
        return false;
    });
});
</script>
于 2013-01-26T15:56:50.837 に答える