Question

我必须在jQuery ready函数之外创建一个函数，该函数在调用时递增用户的分数并在span#score中更新HTML。我有变量。我已经启动了该功能，但我不确定如何完成它以便它将更改文本。我也不确定我是否在.ready部分调用了该功能。

我将此作为我几天前提出的多个问题的一部分，但我真的问错了，太宽泛了。我需要在今晚解决这个问题。它应该在午夜到期，但我确定他会迟到一点。我认为这是我需要发布的所有代码。我认为剩下的就是挡路了，但如果你需要，请告诉我。

<script>
    var mole='<img src="img/mole.jpg"/>';
    var score=0;
    $(document).ready(function(){

        $("#score").click(increment);

    }); //end.ready

    function increment(){
        score+=1

    }; //end increment

</script>

在这一点上任何帮助都是真正的祝福。

Answer 1

您的increment()功能确实提高了分数;所有你需要做的就是在页面上输出这个。这可以使用$("#score")[0].innerHTML = score完成，如以下示例所示：

var score = 0;

$(document).ready(function() {
  $("#score").click(increment);
});

function increment() {
  score += 1;
  $("#score")[0].innerHTML = score;
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="score">0</div>

[0]是必需的，因为$(#score)（虽然定位ID）会返回NodeList对象集合，并且您想要访问此列表中的第一个对象。

希望这有帮助！：）

Answer 2

您需要return函数增加的值。还可以使用text方法显示DOM元素中的文本

<!-- begin snippet: js hide: false console: true babel: false -->

var score = 0;

function increment() {
  score += 1
  return score;
};
$(document).ready(function() {
  $("#score").click(function() {
    var getIncreasedValue = increment();
    $("#textDisplay").text(getIncreasedValue)
  });

}); //end.ready

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="textDisplay"></div>
<button id="score">Click</button>

Answer 3

由于execution context内的jQuery.click()设置为 jQuery的元素数组中的单个DOM元素，您还可以执行以下操作：

http://bitbucket.org.com/rest/api/1.0/projects/$ProjectKey/repos/$RepoKey/settings/hooks/com.trimble.tekla.TeamCityTriggerHook-SonarFix:TeamcityTriggerHook

$(function() {
  $('span#counter').on('click', increment);
  // or $('span#counter').click(increment);
})

var score = 0;
function increment() {
    this.innerHTML = ++score + '';
}

span#counter {
  padding: 15px;
  margin: 15px;
  line-height: 10px;
  cursor: pointer;
  border: 1px solid #ddd;
  user-select: none;
}

需要在jQuery中增加分数，如何更改文本

3 个答案: