2017-03-16 15 views
0

ここで何が起こっているのかは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> 
+0

テキストとしてコードをインラインで投稿してください。 jsfiddleはプラスです。 –

+0

@LelioFaietaが要求通りに追加されました –

答えて

1
は、あなたの配列があることを変更し

var arr = ["<div class='div-50' data-width='50'></div>", "<div class='div-25' data-width='25'></div>"]; 
+0

これが解決しました。なぜjqueryオブジェクトとして追加するのがこのような動作を引き起こすのか分かりますか? –

+0

jqueryオブジェクトでは問題ありませんが、使用したセレクタは実際には無効です。セレクタに関するリンクは次のとおりです。https://api.jquery.com/category/selectors/ HTMLは有効なセレクタではありません.JavaScriptのgetElementByIdを使用すると既存の要素を取得し、それを$(要素)を使用してjQueryに変換しますが、それは異なります。私はそれがそれをした範囲で働いたことに驚いています。 – Martina

+0

実際には、コードをもう一度見ていて今は意味をなさないが、誤解を招くのはそれがまったく動作するということだと思う。私は時々何か作業がすべての# –

関連する問題