2017-04-09 14 views
0

誰かが私のコードでいくつかの問題を助けてくれるかどうか疑問に思っていました。作成したdivにjqueryフィルタを適用しますか?

基本的には、IVEはonclickのevent.From 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> 

をやった中で4つの要素(divを)作成はOKですが、jqueryの私からの場合イムわかりませんJavaScriptのコード(作成された4つの要素)に表示される同じonclickイベントでアクティブにするフィルタを偶数のものに適用して、アニメーションをマージンをわずかに下げるようにすることができます。

.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; 
} 
+0

の下マージン下

スニペットを使用して下向きにそれらのdiv以下の要素をプッシュするクラスを追加します"をクリックすると、マージンボトムを使ってその下の要素を下に移動しますか? – repzero

+0

はい!アニメーションが単に偉大になる偶数divを動かす限り、指示には関係ありません、あなたの助けに感謝しますrepzero – ge00rge

+0

OK ..私の応答を確認してください – repzero

答えて

0
を: は

CSSクラス「.cartas」のコードが含ま事前にみんなにありがとう..私はそれについて読んだが、私はフィルタが作成された要素に適用されることを考えると、海のビットをしています

すべてのイベントディビジョンにonlcickイベントを追加します。このイベントは、ラベル「CASINOで偶数個の要素をしたいと思い

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>

+0

まだ動作しません、それはラインの干渉する可能性がありますコード card.setAttribute( "class"、 "cartas") 既存のクラスに調整するためにコード行を修正しましたが、まだ機能しませんでした(単純に上マージンを増やしました) コードにcssクラスの.cartasを含めました – ge00rge

関連する問題