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

您需要使用text()方法而不是val()，因为该元素是<span>，而不是<input>。

您还需要$("#upvotes").find('strong').text()来保持格式化。

P.S：我建议使用CSS而不是<strong>。

Answer 2

1。因为您正在处理text()，所以需要val()而不是span。 val()已应用于input fields。

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>

Answer 3

您需要注意两件事：

1）属性。你用过了

<a href="javascript:void(0)" data-vote="up" data-id=1 value="up">

为了正确起见，请在双引号"之间添加属性值，这会导致以下修复

<a href="javascript:void(0)" data-vote="up" data-id="1" value="up">

2）注意您正在使用的功能。您使用过jQuery的.val()函数，该函数仅适用于<input>元素，而不适用于其他元素。 jQuery文档甚至提到它：

.val()方法主要用于获取表单元素的值，例如input，select和textarea。在空集合上调用时，它返回undefined。 source

您已在非输入元素上使用该功能。要检索非输入元素的内容，请使用.text()或将值放在输入元素中。

这是一个固定且有效的代码（我已将toastr消息替换为console.log）

＆＃13;

 $("#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").text(parseInt($("#upvotes").text()) + 1);
            console.log("Your Like was posted!");
        }
        if (vote === "down") {
            //call the database to increase the like count for this comment
             // IncrementDisLikes(commentId);
            $("#downvotes").text(parseInt($("#downvotes").text()) + 1);
            console.log("Your DisLike was posted!");
        }
    }

＆＃13;

<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>

＆＃13;

jquery中没有发生动态变化

3 个答案: