javascript - jquery 中未发生动态变化

Question

我对我的java脚本(jQuery)有点生疏，但我正在尝试在我的网页上添加一个功能。脚本逐步执行，但页面上的值未更新。我可能忘记了一些小事，但在搜索过程中没有找到它。

我的网页上生成了以下 html

<div class="panel-body">
     Great job on this vintage piece of machinery!
     <br />
     <span id="thumbs">                                        
        <a href="javascript:void(0)" data-vote="up" data-id=1 value="up">&#128077;</a>
        &nbsp;
        <a  href="javascript:void(0)" data-vote="down" data-id=1 value="down">&#128078;</a>
    </span>
    <span class="likedisplay">
         Likes&nbsp;<span id="upvotes"><strong>27</strong></span>
         &nbsp;
         DisLikes&nbsp;<span id="downvotes"><strong>6</strong></span>
    </span>
</div>

这是脚本。

 $("#thumbs a").on("click", function (e) {
        e.preventDefault();
        var commentId = $(this).data("id");
        var vote = $(this).data("vote");
        increment(vote, commentId);

    });
    function increment(vote, commentId) {
        if (vote === "up") {
            //call the database to increase the like count for this comment
             //IncrementLikes(commentId);
            $("#upvotes").val(parseInt($("#upvotes").val()) + 1);
            toastr.info("Your Like was posted!");
        }
        if (vote === "down") {
            //call the database to increase the like count for this comment
             // IncrementDisLikes(commentId);
            $("#downvotes").val(parseInt($("#downvotes").val()) + 1);
            toastr.info("Your DisLike was posted!");
        }
    }

$("#upvotes").val 正常执行，但不会更新页面上的值。我错过了什么？

Answer 1

1.需要text()而不是val()，因为您正在处理span。 val() 应用于输入字段。

2.$("#upvotes Strong") 需要代替 $("#upvotes") (downvotes 也一样) )。

3.data-id="1" 是正确的方法，而不是 data-id=1

工作代码:-

$("#thumbs a").on("click", function (e) {
  e.preventDefault();
  var commentId = $(this).data("id");
  var vote = $(this).data("vote");
  increment(vote, commentId);
});

function increment(vote, commentId) {
  if (vote === "up") {
    $("#upvotes strong").text(parseInt($("#upvotes strong").text()) + 1);
    toastr.info("Your Like was posted!");
  }
  if (vote === "down") {
    $("#downvotes strong").text(parseInt($("#downvotes strong").text()) + 1);
    toastr.info("Your DisLike was posted!");
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body">
  Great job on this vintage piece of machinery!
  <br />
  <span id="thumbs">                                        
    <a href="javascript:void(0)" data-vote="up" data-id="1" value="up">&#128077;</a>&nbsp;
    <a  href="javascript:void(0)" data-vote="down" data-id="1" value="down">&#128078;</a>
  </span>
  <span class="likedisplay">
    Likes&nbsp;<span id="upvotes"><strong>27</strong></span>&nbsp;
    DisLikes&nbsp;<span id="downvotes"><strong>6</strong></span>
  </span>
</div>