javascript - 使用 jQuery 动态为元素分配 ID

Question

我有一个带有动态分配 ID 的表格单元格，如下所示，

    <tbody>
      {% for item in thread_model %}
      <tr>
       .....
        <td id="{{ item.id }}" class='btn vote_up'>{{ item.id }} Vote Up</td>
        <td id="{{ item.id }}" class='btn vote_down'>{{ item.id }} Vote Down</td>
        <td id="voted{{ item.id }}">{{ item.vote }}</td>
        ........
      </tr>
      {% endfor %}
    </tbody>

这工作正常，然后我有一些 ajax 调用 Django View 。但后来我希望设置该单元格的innerHTML。但是我如何让 jQuery 将innerHTML放入表格单元格中，其ID与我按下的投票赞成或反对的行相同？

$(document).ready(function() {
  $('.vote_up').on('click', function() {
    $.get("/vote_up/" + this.id + "/", function(data) {
      $('#voted' + this.id).innerHTML = data;
    });
  });
  $('.vote_down').on('click', function() {
    $.get("/vote_down/" + this.id + "/", function(data) {
      $('#voted' + this.id).innerHTML = data;
    });
  });
});

网址，

url(r'^vote_up/(?P<id>\d+)/$', home.vote_up, name='vote_up'),
url(r'^vote_down/(?P<id>\d+)/$', home.vote_down, name='vote_down'),

View 看起来像这样，

def vote_up(request, id):
    posts = PostModel.objects.get(pk = id)
    posts.vote += 1
    PostModel.objects.filter(pk=id).update(vote=posts.vote)
    return HttpResponse(posts.vote, content_type="text/plain")

def vote_down(request, id):
    posts = PostModel.objects.get(pk = id)
    posts.vote -= 1
    PostModel.objects.filter(pk=id).update(vote=posts.vote)
    return HttpResponse(posts.vote, content_type="text/plain")

谢谢

Answer 1

this.id 是 $.get 内的 undefind。所以你应该像这样改变你的代码

$(document).ready(function() {
      $('.vote_up').on('click', function() {
        var id = this.id;
        $.get("/vote_up/" + id + "/", function(data) {
          $('#voted' + id).html(data);
        });
      });
      $('.vote_down').on('click', function() {
        var id = this.id;
        $.get("/vote_down/" + id + "/", function(data) {
          $('#voted' + id).html(data);
        });
      });
    });