Question

我正在尝试制作一款游戏，您点击按钮即可获得积分。一旦获得X点数，就会出现div。我厌倦了使用jquery的.change来查看#pointCounter是否已经改变，以便知道是否应该出现新的div（通过添加新类）。这不行。我没有正确使用更改方法，还是应该使用其他方法？有没有检查var点何时更改而不是检查html是否更改？

HTML

 <p>You have <span id='pointCounter'>0</span> points.</p>
 <button id='clickButton'>Click Me</button>
 <div id='store'></div>

JS

$('#clickButton').click(function() {
  points = points + addPoints;
  $('#pointCounter').html(points);
});


$('#pointCounter').change(function() {
  if (points >= 5) {
    $('#store').addClass('showMe');
 }
});

Answer 1

此时无法显示div：

$('#clickButton').click(function() {
  points = points + addPoints;
  if (points > 500) $('#someDIV').addClass('showme');
  $('#pointCounter').html(points);
});

Answer 2

更改仅适用于j08691所说的选择或其他表单元素，但您可以执行此类操作，现在我只将点设置为全局变量，但您也可以将值传递给函数以增加点值。

查看实际操作：http://jsfiddle.net/1j33tm0g/1/

var points = 0;
var addPoints = 1;

$('#clickButton').click(function() {
  points += addPoints;
  $('#pointCounter').html(points);
    if(points >= 5) {
       $('#store').addClass('showMe');
    }
});

Answer 3

我会选择jQuery hide / show：

<p>You have <span id='pointCounter'>0</span> points.</p>
 <button id='clickButton'>Click Me</button>
 <div id='store'>Test</div>

使用JS：

var points = 0;
var addPoints = 1;

$("#store").hide();

$('#clickButton').click(function() {
  points = points + addPoints;
  $('#pointCounter').html(points);
  if (points >= 5) {
    $('#store').show();
  }
});

此处：http://jsfiddle.net/rnm9e5vh/

当JS变量更改不起作用时，Jquery更改

3 个答案: