Javascript 如何正确序列化？按下时，Ajax会更新对象forloop中django upvote按钮的所有实例

好的，我有一个索引页，里面有可以向上或向下投票的项目。 问题是，当我向上/向下投票一个项目时，页面上的所有项目都会向上/向下投票，页面上所有按钮的外观都会改变，而不仅仅是向上/向下投票的一个对象

有人能帮我正确序列化每个for循环对象吗？

我的索引页：

{% for post in posts %}
    <span id="post_{{forloop.counter}}" data-value="{{post.id}}"></span>
    <button class="vote_action" value="upvote_button"> + </i></button>
    
    <span id="votes_{{forloop.counter}}">{{post.points}}</span>
                                  
    <button class="vote_action" value="downvote_button"> - </button>
{% endfor %}
...
<script type="text/javascript">
 // JQUERY - AJAX SCRIPT FOR voting
 $(document).ready(function(){
   {% for post in posts %}
   $('.vote_action').click(function(e) {
      var postid = document.getElementById('post_{{forloop.counter}}').getAttribute('data-value');
          var button = $(this).attr("value");
          e.preventDefault();
          $.ajax({
            type: 'POST',
            url: '{% url "vote" %}',
            data: {
              postid: postid,
              csrfmiddlewaretoken: '{{ csrf_token }}',
              action: 'postvote',
              button: button,
            },
            success: function(json){
              if (json.length < 1 || json == undefined) {
                //empty
              }
              document.getElementById("votes_{{forloop.counter}}").innerHTML = json['result']
              //change button looks
              $("#uvb_{{forloop.counter}}").addClass("disabled");
              $("#dvb_{{forloop.counter}}").addClass("disabled");
            },
            error: function(xhr, errmsg, err) {}
          })
        })
        {% endfor %}
      })
      </script>

---

您可以简单地使用jquery的

最近（）

和

find（）

方法来实现相同的操作，而不是对脚本使用

for loop

。以下是您需要在django代码中进行的一些更改：

{% for post in posts %}
  <div> //<!--add this div-->
    <span id="post_{{forloop.counter}}" data-value="{{post.id}}"></span>
    <button class="vote_action" value="upvote_button"> + </i></button>
    //<!--add class here-->
    <span id="votes_{{forloop.counter}}" class="votes_points">{{post.points}}</span>                              
    <button class="vote_action" value="downvote_button"> - </button>
</div>
{% endfor %}

演示代码（带有演示数据）：

$（'.vote_action'）。单击（函数（e）{
//得到最近的div
变量选择器=$（this）.closest（'div'）；
var按钮=$（this.attr（“值”）；
//查找类get id并拆分以获取计数器
var counter=selector.find（'.vows_points'）.attr（'id'）.split（'uu'））
//获取跨度数据值
var postid=selector.find（“span[id=post_”+计数器[1]+“]”）attr（“数据值”）；
console.log（“postID-->”+postID+“||按钮-->”+Button+“|计数器[1]-->”+计数器[1]）
e、 预防默认值（）；
//你的ajax
$.ajax({
键入：“POST”，
url:“{%url”投票“%}”，
数据：{
posted:posted，
csrfmiddlewaretoken:“{{csrf_令牌}}”，
行动：“投票后”，
按钮：按钮
},
成功：函数（json）{
if（json.length<1 | | json==未定义）{
//空的
}
//添加对投票点的响应
selector.find（'.voates_points'）.text（json['result']）
//更改按钮外观
$（“#uvb"+计数器[1]）.addClass（“禁用”）；
$（#dvb#+计数器[1]）.addClass（“禁用”）；
},
错误：函数（xhr，errmsg，err）{}
})
})

+
15
- 
+
52
- 
+
52
- 

在@swati提供了支持之后，我能够让它正常工作，如下所示，任何其他有类似问题的人都可以使用

所有功劳都归于@swati

页面的HTML部分：

{% for post in posts %}
  <div class="eachpost"> //<!--add this div-->
    <span id="post_{{forloop.counter}}" data-value="{{post.id}}"></span>
    <button class="vote_action" value="upvote_button" id="uvb_{{forloop.counter}}"> + </i></button>
    //<!--add class here-->
    <span id="votes_{{forloop.counter}}" class="votes_points">{{post.points}}</span>                              
    <button class="vote_action" value="downvote_button" id="dvb_{{forloop.counter}}"> - </button>
  </div>
{% endfor %}

{%for posts in posts%}
//
+ 
//
{{post.points}}
- 
{%endfor%}

页面的JS/AJAX部分

$('.vote_action').click(function(e) {
    //get closest div
      var selector = $(this).closest('div.eachpost');
      var button = $(this).attr("value");
      //find class get id and split to get counter
      var counter =selector.find('.votes_points').attr('id').split('_')
      //get span data-value
      var postid = selector.find("span[id=post_"+counter[1]+"]").attr('data-value');
      
      console.log("postID-->"+postid+"Button-->"+button+"counter[1]-->"+counter[1])
      e.preventDefault();
      //your ajax
       $.ajax({
        type: 'POST',
        url: '{% url "vote" %}',
        data: {
          postid: postid,
          csrfmiddlewaretoken: '{{ csrf_token }}',
          action: 'postvote',
          button: button
        },
        success: function(json) {
          if (json.length < 1 || json == undefined) {
            //empty
          }
          //add response to votes_point
          $("#votes_"+counter[1]).text(json['result']);
          //change button looks
          $("#uvb_"+counter[1]).addClass("disabled");
          $("#dvb_"+counter[1]).addClass("disabled");
        },
        error: function(xhr, errmsg, err) {}
      })
     
    })

$（'.vote_action'）。单击（函数（e）{
//得到最近的div
变量选择器=$（this.nexist（'div.eachpost'）；
var按钮=$（this.attr（“值”）；
//查找类get id并拆分以获取计数器
var counter=selector.find（'.vows_points'）.attr（'id'）.split（'uu'））
//获取跨度数据值
var postid=selector.find（“span[id=post_”+计数器[1]+“]”）attr（“数据值”）；
log（“postID-->”+postID+”按钮-->“+Button+”计数器[1]-->”+计数器[1]）
e、 预防默认值（）；
//你的ajax
$.ajax({
键入：“POST”，
url:“{%url”投票“%}”，
数据：{
posted:posted，
csrfmiddlewaretoken:“{{csrf_令牌}}”，
行动：“投票后”，
按钮：按钮
},
成功：函数（json）{
if（json.length<1 | | json==未定义）{
//空的
}
//添加对投票点的响应
$（“投票数”+计数器[1]）.text（json['result']）；
//更改按钮外观
$（“#uvb"+计数器[1]）.addClass（“禁用”）；
$（#dvb#+计数器[1]）.addClass（“禁用”）；
},
错误：函数（xhr，errmsg，err）{}
})
})

为什么在for循环中包含脚本？为什么不只使用一个脚本，并使用jquery的

closest（）

和

find（）

方法来实现同样的效果呢？我在不断学习。如果您能演示，我们将不胜感激。非常感谢您的详细回答。如果for循环之间有其他

div

s，我该怎么办？我省略了一些东西来保持它的简单性，比如引导卡div等。“你可以简单地给

class=“something”

到

外部的
div，在那里你所有的卡和span都在那里，你只需要在jQuery代码中更改
$（这个）。最近的（'div.something'）
应该可以用。谢谢。现在试试这个！再次感谢你！你的回答很有用。我做了一些更改使其工作，因为当文本从Json结果更新时，它正在更新所有帖子上的文本。我将在下面为任何其他可能需要的人发布完整的答案。但再次感谢你
{% for post in posts %}
  <div class="eachpost"> //<!--add this div-->
    <span id="post_{{forloop.counter}}" data-value="{{post.id}}"></span>
    <button class="vote_action" value="upvote_button" id="uvb_{{forloop.counter}}"> + </i></button>
    //<!--add class here-->
    <span id="votes_{{forloop.counter}}" class="votes_points">{{post.points}}</span>                              
    <button class="vote_action" value="downvote_button" id="dvb_{{forloop.counter}}"> - </button>
  </div>
{% endfor %}

$('.vote_action').click(function(e) {
    //get closest div
      var selector = $(this).closest('div.eachpost');
      var button = $(this).attr("value");
      //find class get id and split to get counter
      var counter =selector.find('.votes_points').attr('id').split('_')
      //get span data-value
      var postid = selector.find("span[id=post_"+counter[1]+"]").attr('data-value');
      
      console.log("postID-->"+postid+"Button-->"+button+"counter[1]-->"+counter[1])
      e.preventDefault();
      //your ajax
       $.ajax({
        type: 'POST',
        url: '{% url "vote" %}',
        data: {
          postid: postid,
          csrfmiddlewaretoken: '{{ csrf_token }}',
          action: 'postvote',
          button: button
        },
        success: function(json) {
          if (json.length < 1 || json == undefined) {
            //empty
          }
          //add response to votes_point
          $("#votes_"+counter[1]).text(json['result']);
          //change button looks
          $("#uvb_"+counter[1]).addClass("disabled");
          $("#dvb_"+counter[1]).addClass("disabled");
        },
        error: function(xhr, errmsg, err) {}
      })
     
    })