Question

我想在定义的时间内出现多个div，当我点击它时，给出300点（值），它以值0（标点符号）开始，并在页面准备好时触发一个函数

var puntuacion = 0;
$(document).ready(function() {
  FadeDiv();

  function FadeDiv() {
    var posx = Math.floor(Math.random() * 300);
    var posy = Math.floor(Math.random() * 300);
    $newdiv = $("<div id='circle-green'></div>").css({
      'left': posx + 'px',
      'top': posy + 'px'
    });
    $newdiv.appendTo('body').fadeIn(1000).delay(1000).fadeOut(1000, function() {
      FadeDiv();
    });
  }
  $("#Points").text(puntuacion);
  $("#circle-green").click(function() {
    $(this).remove();
    puntuacion+=300;
    $("#Points").text(puntuacion);
  });

  setTimeout(FadeDiv, 1000);
  setTimeout(FadeDiv, 500);
  setTimeout(FadeDiv, 100);
});

body {
  background-color: #000;
  color: #FFF;
  font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 14px;
}
#circle-green {
  width: 50px;
  height: 50px;
  position: absolute;
  display: none;
  background-color: #00ff00;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
  cursor: pointer;
  box-shadow: 1px 1px 5px 5px #00ff00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="Points"></div>

https://jsfiddle.net/k6shp80d/

但我可以点击第一个div，为什么？也许是因为我是JavaScript和jQuery的新手，请问我有任何疑问或疑问！对不起我的英语不好。

Answer 1

您正在创建许多未被删除的#circle-green div，并且您正在呼叫$("#circle-green").click。将#circle-green更改为class，而不是id。另外，更改单击处理程序和CSS。

固定！

＆＃13;

   
$(document).ready(function() {
 var puntuacion = 0;
  FadeDiv();

  function FadeDiv() {
    var posx = Math.floor(Math.random() * 300);
    var posy = Math.floor(Math.random() * 300);
    $newdiv = $("<div class='circle-green'></div>").css({
      'left': posx + 'px',
      'top': posy + 'px'
    }).click(function() {
		$(this).remove();
		puntuacion += 300;
		$("#Points").text(puntuacion);
	});
    $newdiv.appendTo('body').fadeIn(1000).delay(1000).fadeOut(1000, function() {
      FadeDiv();
    });
  }

  $("#Points").text(puntuacion);

  setTimeout(FadeDiv, 1000);
  setTimeout(FadeDiv, 500);
  setTimeout(FadeDiv, 100);
});

＆＃13;

body {
  background-color: #000;
  color: #FFF;
  font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 14px;
}
.circle-green {
  width: 50px;
  height: 50px;
  position: absolute;
  display: none;
  background-color: #00ff00;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
  cursor: pointer;
  box-shadow: 1px 1px 5px 5px #00ff00;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="Points"></div>

＆＃13;

Answer 2

使用jquery onClick函数并使用Class而不是Id，如下所示：

$(".circle-green").on('click',function(){

});
OR
$(document).on('click', '.circle-green', function () {
});

希望能解决您的疑问。 https://jsfiddle.net/k6shp80d/1/

Answer 3

您的错误发生在puntuacion =+ 300;中正确的语法是：

puntuacion += 300;

最终代码应如下所示：

var puntuacion = 0;
$(document).ready(function() {
  FadeDiv();

  function FadeDiv() {
    var posx = Math.floor(Math.random() * 300);
    var posy = Math.floor(Math.random() * 300);
$newdiv = $("<div onclick='greenFunc(this);' id='circle-green'></div>").css({
  'left': posx + 'px',
  'top': posy + 'px'
});
    $newdiv.appendTo('body').fadeIn(1000).delay(1000).fadeOut(1000, function() {
      FadeDiv();
    });
  }
  $("#Points").text(puntuacion);

  setTimeout(FadeDiv, 1000);
  setTimeout(FadeDiv, 500);
  setTimeout(FadeDiv, 100);
});

function greenFunc(element){
    $(element).remove();
    puntuacion += 300;
    $("#Points").text(puntuacion);
}

body {
  background-color: #000;
  color: #FFF;
  font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 14px;
}
#circle-green {
  width: 50px;
  height: 50px;
  position: absolute;
  display: none;
  background-color: #00ff00;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
  cursor: pointer;
  box-shadow: 1px 1px 5px 5px #00ff00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="Points"></div>

DEMO： http://codepen.io/tuga/pen/zGOZrV

点击时jQuery / JavaScript递增值

3 个答案: