Question

嘿伙计们，我想知道是否有人可以帮助解决我的代码上的一些问题。

基本上我在onclick事件中创建了4个元素（div）。从html我也这样做了同样的按钮消失了

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="blackjack2.css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="blackjack1.js"></script>
</head>
<body>

<button class= "boton" id="start">Play</button>
<button class= "boton" id="hit">Hit</button>
<button class= "boton" id= "stand">Stand</button>

<script type="text/javascript">

var jugar = document.getElementById('start')
var mas = document.getElementById('hit')
var mantener = document.getElementById('stand')


var cuerpo= document.getElementsByTagName('body')[0]

var crear_cartas= function() {
var card= document.createElement('div');
var texto =document.createTextNode("CASINO");
card.setAttribute("class","cartas");
card.appendChild(texto);
cuerpo.appendChild(card);
}

jugar.onclick= function(){
crear_cartas()
crear_cartas()
crear_cartas()
crear_cartas()
jugar.setAttribute('class','ocultar')
}
</script>
  </body>
</html>

直到还可以，但我不确定是否可以从jquery中应用一个过滤器，该过滤器激活javascript代码（在这4个创建的元素上）出现的同一个onclick事件，以便它们制作动画略微降低利润率。我已经读过它，但我有点在海上，因为过滤器适用于创建的元素.. 提前谢谢你们

css类“.cartas”代码包括：

.cartas{
/*display: none;*/
margin: 260px 75px 0 75px;
display: inline-block;
border-radius: 10px;
border: 1px  solid black;
padding-top: 50px;
height:100px;
width:100px;
color: #003366;
font-family: Muli,Helvetica Neue,Helvetica,sans-serif;
text-align: center;
background-color: #f0f8ff;
}

Answer 1

将onlcick事件添加到所有事件div。此事件将添加一个类，该类将使用margin-bottom

向下推动这些div下方的元素

下面的代码段

var counter = 0;
var jugar = document.getElementById('start')
var mas = document.getElementById('hit')
var mantener = document.getElementById('stand')


var cuerpo = document.getElementsByTagName('body')[0]

var crear_cartas = function() {
  card = document.createElement('div');
  var texto = document.createTextNode("CASINO");
  card.setAttribute("class", "cartas");
  card.appendChild(texto);
  cuerpo.appendChild(card);
}

jugar.onclick = function() {
  for (var x = 0; x < 4; ++x) {
    crear_cartas();
    if ((x + 1) % 2 == 0) {
      card.addEventListener('click', function() {
        this.classList.add("move");
      })

    }

  }
  jugar.setAttribute('class', 'ocultar')
} //end func

div {
  transition: margin-bottom 0.5s;
}

.move {
  margin-bottom: 50px;
}

<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="blackjack2.css">
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="blackjack1.js"></script>
</head>

<body>

  <button class="boton" id="start">Play</button>
  <button class="boton" id="hit">Hit</button>
  <button class="boton" id="stand">Stand</button>


</body>

</html>

将jquery过滤器应用于创建的div？

1 个答案: