ここで何が起こっているのかは100%確信していませんが、divは50%または25%の幅でランダムに追加されますが、データ属性を使用してdivの合計サイズを合計しながら、divは75%または100%を超えます。 75%で、25%のdivがハードコードされ、合計の長さ変数が0に設定された後にサイクルが再び開始されます.100%で、変数の長さが0に設定され、ランダム性が再び開始されますが、存在している、私の問題は彼らではありません。jQuery前のオブジェクトの削除/隠蔽を追加する
たとえば、行の2つの50%divが1つしか表示されない場合、i console.log
イベントには正しい数値50と100が表示されますが、1 divだけがappendで表示されます。
うまくいけば、私のバイオリンは、状況にいくつかの光を当てることができます。https://jsfiddle.net/g8urnar3/2/
(エラーを複製するためのボタンという名前のアンカータグをクリック)
を私の質問はこれがなぜ起こるとさせていただきました、ありますか?
としては、コードを要求し...
<html>
<style>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body{
padding: 0;
border: none;
margin: 0;
}
a {
padding: 15px;
background: lightgrey;
text-decoration: none;
color: white;
border-radius: 4px;
}
.list {
width: 100%;
padding: 0;
margin: 0;
border: none;
}
a:hover{
cursor: pointer;
}
div {
height: 100px;
border: 2px solid black;
display: inline;
float: left;
}
.div-50{
width: 50%;
background-color: red;
}
.div-25{
width: 25%;
background-color: green;
}
</style>
<center>
<a href="#">Button</a>
</center>
<br><br>
<hr>
<div class="list">
</div>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
(function(){
var currentLength = 0;
var arr = [$("<div class='div-50' data-width='50'></div>"), $("<div class='div-25' data-width='25'></div>")];
$('a').click(function(){
console.log(currentLength);
if(currentLength < 75)
{
var random = arr[Math.floor(Math.random() * arr.length)];
currentLength = currentLength + Number($(random).attr("data-width"));
$('.list').append(random);
console.log(random);
console.log($("<div class='div-25' data-width='25'></div>"));
}
else if(currentLength == 100) {
currentLength = 0;
var random = arr[Math.floor(Math.random() * arr.length)];
currentLength = currentLength + Number($(random).attr("data-width"));
$('.list').append(random);
}
else {
currentLength = 0;
$('.list').append($("<div class='div-25'></div>"));
currentLength = currentLength + 25;
}
})
})();
</script>
テキストとしてコードをインラインで投稿してください。 jsfiddleはプラスです。 –
@LelioFaietaが要求通りに追加されました –