javascript - 如何从js中的按钮单独提取评分和？

Question

由于不了解 js，当单击按钮（其中一种反应）时，我无法使其工作和更新，只有一个计数器，而不是内置在按钮中。据我了解，错误是函数中的 $ (this) 。但是有什么方法可以改变按钮之间的评分量计数器呢？除此之外，此代码还添加到另外 9 个帖子中。

         <button class="btn-like-up" data-id="{{ post.id }}" type="button" data-type="file" data-action="rate_up">
             <i class="bi bi-chevron-up"></i>
         </button>
            <!-- COUNTER --> 
         <span data-count="total_rating">{{ post.total_rating }}</span>
          <!-- / COUNTER --> 
          <button class="btn-like-down" data-id="{{ post.id }}" type="button" data-type="file" data-action="rate_down">
             <i class="bi bi-chevron-down"></i>
              <span data-count="total_rating">{{ post.total_rating }}</span>
         </button>
         

单独使用时，点击时不会更新评分数字。

    $('.btn-like.up').submit('click', function(e) {
    e.preventDefault()
    let ratingBox = $(this).data('id')
    let postType = ratingBox.data('type')
    let postId = ratingBox.data('id')
    let postAction = ratingBox.data('action')
    let totalRating = ratingBox.find('[data-count="total_rating"]')

    $.ajax({
        type: 'POST',
        url: '/system/' + postType + '/' + postId + '/' + postAction + '/',
        data: {
            'post_id': postId,
            'csrfmiddlewaretoken': csrftoken
        },
        success: function(response) {
            totalRating.text(response.total_rating);
        },
        error: function(error) {
            console.log(error);
        },
    })
})

$('.btn-like.down').submit('click', function(e) {
    e.preventDefault()
    let ratingBox = $(this).data('id')
    let postType = ratingBox.data('type')
    let postId = ratingBox.data('id')
    let postAction = ratingBox.data('action')
    let totalRating = ratingBox.find('[data-count="total_rating"]')

    $.ajax({
        type: 'POST',
        url: '/system/' + postType + '/' + postId + '/' + postAction + '/',
        data: {
            'post_id': postId,
            'csrfmiddlewaretoken': csrftoken
        },
        success: function(response) {
            console.log(response)
            totalRating.text(response.total_rating);
        },
        error: function(error) {
            console.log(error);
        },
    })
})

标签： javascriptdjango

Answer 1

您可以给data-span="{{ post.id }}"您的totalRating跨度。然后​​，每当用户单击任何按钮时，您都可以获得data-id并使用它来引用跨度标签，即：$("span[data-span=" + postId + "]")。此外，您可以将两个按钮事件合并为一个，因为我看不出它们之间有任何区别。

演示代码：

//use only one ..event handler ..
$('.btn-like-up ,.btn-like-down').on('click', function(e) {
  e.preventDefault()
  let ratingBox = $(this) //refer to your button
  let postType = ratingBox.data('type')
  let postId = ratingBox.data('id')
  let postAction = ratingBox.data('action')
  let totalRating = $("span[data-span=" + postId + "]") //refer to span..tag between button
  console.log(postId, postAction)
  /*$.ajax({
    type: 'POST',
    //other codes
    success: function(response) {*/
  //just for demo..
  var response = {
    "total_rating": 90
  }
  totalRating.text(response.total_rating);
  /* },
    error: function(error) {
      console.log(error);
    },
  })*/
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<button class="btn-like-up" data-id="1" type="button" data-type="file" data-action="rate_up">
             <i class="bi bi-chevron-up">Up</i>
         </button>
<!--added data-span="{{ post.id }}"-->
<span data-span="1" data-count="total_rating">12</span>
<button class="btn-like-down" data-id="1" type="button" data-type="file" data-action="rate_down"><i class="bi bi-chevron-down">Down</i>
 </button>
<br/>
<button class="btn-like-up" data-id="2" type="button" data-type="file" data-action="rate_up">
             <i class="bi bi-chevron-up">Up</i>
         </button>
<span data-span="2" data-count="total_rating">12</span>
<button class="btn-like-down" data-id="2" type="button" data-type="file" data-action="rate_down"><i class="bi bi-chevron-down">Down</i>
 </button>