mutiple divの配列を書くための良い方法と、要素の最終的な統計を表示する方法はありますか？

HTMLmutiple divの配列を書くための良い方法と、要素の最終的な統計を表示する方法はありますか？

<!DOCTYPE html> 
<html> 

<head> 
    <title></title> 
</head> 

<body> 
    <section id="boxBig"> 
     <div class="box" id="perspective"> 
      <div class="object" id="seekSlider"></div> 
     </div> 
    </section> 
    <section id="layout"> 
     <div class="stats"> 
      <input id="stats1" type="text" value="perspective-origin"> 
      <input id="stats2" type="text" value="perspective"> 
      <input id="stats3" type="text" value="perspective"> 
      <input id="stats4" type="text" value="preserve-3d"> 
      <input id="stats5" type="text" value="rotatez"> 
     </div> 
    </section> 
</body> 

</html>

CSS

.object { 
    align-self: center; 
    margin: auto; 
    width: 100px; 
    height: 100px; 
    background: green; 
} 
#boxBig { 
    margin: 0 auto; 
    width: 200px; 
    height: 200px; 
    background: red; 
    display: flex; 
    flex-direction: row; 
    align-item: center; 
    justify-content: center; 
} 
.box { 
    width: 150px; 
    height: 150px; 
    background: blue; 
    align-self: center; 
    display: flex; 
    flex-direction: row; 
    justify-content: center; 
} 
#perspective { 
    perspective: 0px; 
    -webkit-perspective: 0px; 
} 
#seekSlider { 
    width: 100%; 
} 
#layout { 
    flex-direction: row; 
    flex-wrap: nowrap; 
    display: flex; 
    justify-content: center; 
    align-content: center; 
    background: orange; 
} 
.buttons { 
    flex: 2; 
    order: 0; 
    background: yellow 
} 
.stats { 
    flex: 1; 
    order: 0; 
    background: lightgreen 
}

javascriptの

"use strict"; 

function Gid(id) { 
    return document.getElementById(id); 
} 
var px = 0; 
var seekSlider = Gid('seekSlider'); 
var i = 0; 
var stats1 = Gid('stats1'); 
var stats2 = Gid('stats2'); 
var stats3 = Gid('stats3'); 
var stats4 = Gid('stats4'); 
var stats5 = Gid('stats5'); 
var stats6 = Gid('stats6'); 
var stats7 = Gid('stats7'); 
var stats8 = Gid('stats8'); 
var stats9 = Gid('stats9'); 
var stats10 = Gid('stats10');

は配列でこれを書くために何か良い方法はありますか？私は、これはそこ10はほとんど同じであるので、私は

function perspectiveOrigin() { 
    var seekSlider = Gid('seekSlider'); 
    var boxBig = Gid('boxBig'); 
    var box = document.getElementsByClassName('box'); 
    var perspective = Gid('perspective'); 

    px += 10; 
    seekSlider.style.perspectiveOrigin = px + "%" + "" + px + "%"; 
    var result = 'perspecspective-origin:' + px + '%'; 
    stats1.value = result; 

    console.log(seekSlider.style.perspectiveOrigin); 
}

を投稿didntのon..and iはその回転と視点

含むステータスのような、要素のフィニアル状態を作るしようとした機能の一つである試み

出典

2016-07-12 Chang Rik

ので、あなたは配列にstats1、stats2などをしたいですか？下の関数は各配列項目を呼び出すことができますか？ – krisph

はいですか？ –

あなたがそうのような配列を作成することができます。

var stats = [];

次に、あなたがあなた自身の好みに応じて、以下のいずれかを使用することができます。

stats.push(Gid('stats1')); 
stats.push(Gid('stats2')); 

stats[0] = Gid('stats1'); 
stats[1] = Gid('stats2');

次はあなたが配列を反復処理したい：あなたはまた、あなたを変更する必要があります

for (var i=0; i < stats.length; i++) { 
    perspectiveOrigin(stats[i]); 
}

：

プッシュ方式で行います。

for (var stat in stats) { 
    perspectiveOrigin(stats[stat]); 
}

あなたにも使用することができ、他の方法で少しでも機能します：

perspectiveOrigin() to perspectiveOrigin(stat)

この機能では、 NGE：

stats1.value = result; to stat.value = result;

私はこれのいずれかをテストしていますが、何か問題がある場合は私に知らせていない=]

出典

2016-07-12 09:40:34 krisph

これは私が試したものです、 –

あなたのコードは意味をなさない、元の投稿を編集し、あなたがしようとしていることを説明してください。 =] – krisph

mutiple divの配列を書くための良い方法と、要素の最終的な統計を表示する方法はありますか？

答えて

関連する問題