javascript - 实现点赞功能时出现问题。函数只运行一次

标签 javascript jquery

喜欢或不喜欢函数仅工作一次,就好像“喜欢”变量不再是 true 或 false,这将是有效值。第一次它工作正常(喜欢和不喜欢),但第二次出现“其他”警报,这对我来说绝对不清楚。您能解释一下那里可能出了什么问题吗?正如我通过警报检查的那样,html 中的 Bool 已正确更新。

带有少量 django 模板代码的 HTML,请勿注意:

<div class="incriminate_like" data-post-pk="{{ answer.pk }} " data-who-likes-id="{{ request.user.id }} " >

<div class="data_div" data-bool="false">
<img  class="like_image" src="{% static "img/like.png" %}"/>
</div>
</div>

JQUERY:

 $('.incriminate_like').click(function(){

  var post_pk = $(this).data("post-pk");
  var who_likes_id = $(this).data("who-likes-id");
  var that = $(this);
  var liked = $(this).find(".data_div").data("bool");

  function makeLiked(){

              that.find("img").attr("src","{% static 'img/likered.png' %}");
              that.find(".data_div").data("bool","true");
               // just incriminating 
              var like_number_original = that.next().html();
              var integer_of_like_number_original = parseInt(like_number_original);
              var plus_one_number = integer_of_like_number_original + 1
              that.next().html(plus_one_number);

              }

  function makeDisliked(){

              that.find("img").attr("src","{% static 'img/like.png' %}");
              that.find(".data_div").data("bool","false");
              // just incriminating 
              var like_number_original = that.next().html();
              var integer_of_like_number_original = parseInt(like_number_original);
              var plus_one_number = integer_of_like_number_original - 1
              that.next().html(plus_one_number);


    }

    if (liked == false) {
                          ajaxPost('/like/', {'post_pk': post_pk,'who_likes_id':who_likes_id,'whom_id':whom_id}, function(){
                          makeLiked();


                                                                                                                           })
                         }


    else if (liked == true ) {

                    ajaxPost('/dislike/', {'post_pk': post_pk,'who_likes_id':who_likes_id,'whom_id':whom_id}, function(){
                    makeDisliked();



                                                                                                                        })




                             }



    else {

                      alert('error');
        }

                                  })

最佳答案

问题是,如果你调用 makeLiked() 或 makeDisliked(),你将 data-bool 值设置为字符串,这就是为什么 like == true (甚至 like == false)仅返回 false。 尝试设置如下内容:

that.find(".data_div").data("bool", true);

(注意第二个参数不带“”)

<小时/>

所以最终的代码应该是这样的:

$('.incriminate_like').click(function() {

  var post_pk = $(this).data("post-pk");
  var who_likes_id = $(this).data("who-likes-id");
  var that = $(this);
  var liked = $(this).find(".data_div").data("bool");

  function makeLiked() {

    that.find("img").attr("src", "{% static 'img/likered.png' %}");
    that.find(".data_div").data("bool", true);
    // just incriminating 
    var like_number_original = that.next().html();
    var integer_of_like_number_original = parseInt(like_number_original);
    var plus_one_number = integer_of_like_number_original + 1
    that.next().html(plus_one_number);

  }

  function makeDisliked() {

    that.find("img").attr("src", "{% static 'img/like.png' %}");
    that.find(".data_div").data("bool", false);
    // just incriminating 
    var like_number_original = that.next().html();
    var integer_of_like_number_original = parseInt(like_number_original);
    var plus_one_number = integer_of_like_number_original - 1
    that.next().html(plus_one_number);


  }

  if (liked == false) {
    ajaxPost('/like/', {
      'post_pk': post_pk,
      'who_likes_id': who_likes_id,
      'whom_id': whom_id
    }, function() {
      makeLiked();


    })
  } else if (liked == true) {

    ajaxPost('/dislike/', {
      'post_pk': post_pk,
      'who_likes_id': who_likes_id,
      'whom_id': whom_id
    }, function() {
      makeDisliked();



    })




  } else {

    alert('error');
  }

})

关于javascript - 实现点赞功能时出现问题。函数只运行一次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40456001/

相关文章:

javascript - 在循环中获取值,发送到另一个页面并使用该值调用捕获数据

javascript - 使用 ajax 发送 rowID 并将选定的行附加到新表

JavaScript:instanceof 运算符

javascript - 将对象数组转换为其子数组后的新数组

javascript - jQuery Click 事件不适用于 IE 中的 Fancybox 调用

javascript - 将图像从用户计算机添加到 Canvas

javascript - 带有特殊字符的JS元素标签

javascript - 如何在没有node.js/npm的情况下将Angular 2安装到codeigniter中(手动下载)

javascript - 如何在 JavaScript 中解析这个 JSON 对象?

jquery - 通过 jQuery 附加时,视频自动播放在 chrome 和 IE 上不起作用