javascript - 編集：どうすれば動的にdivを作成できますか？

Question

棒グラフを作成しようとしています。たくさんのコードで問題が発生していますが、最大の問題は、sampleData配列のデータを取得し、毎回新しいdivを作成して次のdivに追加するループを作成できないように見えることです。等々。今のところ、5つのdivを作成しましたが、必要なdivはそれほど多くありません。

また、バーにカーソルを合わせてアイテム数を確認したいと思います。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="testMyJson.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script >
    $(document).ready(function() {
    $.support.cors = true;
    $.ajax({
    url:'https://www.sciencebase.gov/catalog/items?q=Fish&max=20&format=json',
    type: "GET",
    dataType: "json",
    success: function( response ) {
    var sampleData = [25,7,19,22,150];

    //for (var i = 0; i < 5; i++) {
        $('#super-skill-1').animate( { height:sampleData[0] + 'px' } );
        $('#super-skill-2').animate( { height:sampleData[1] + 'px' } );
        $('#super-skill-3').animate( { height:sampleData[2] + 'px' } );
        $('#super-skill-4').animate( { height:sampleData[3] + 'px' } );
        $('#super-skill-5').animate( { height:sampleData[4] + 'px' } );
    //}


    },
    error: function(jqXHR, textStatus, errorThrown) {
            alert("Ajax Call Failed - textStatus =" +  textStatus + ", errorThrown = " + errorThrown);
}
});
});
</script>
<style>
.the-container { width:400px; height:250px; border-style: solid; border-width:3px; border-color:black }
.the-container ul { margin:0; padding:0; list-style:none; }
.the-container li { width:30px; height:250px; margin:0 5px; position:relative; float:left; }
.the-container li a { position:absolute; bottom:0; width:100%; height:0; background-color:#ccc; }
.the-container li a:hover { background-color:green; }
</style>
</head>
<body>
<div class="the-container">
<ul>
<li><a id="super-skill-1" href="#" class="tooltip" title=sampleData[0]></a></li>
<li><a id="super-skill-2" href="#" class="tooltip" title="TESTING!!!!"></a></li>
<li><a id="super-skill-3" href="#" class="tooltip" title="TESTING!!!!"></a></li>
<li><a id="super-skill-4" href="#" class="tooltip" title="TESTING!!!!"></a></li>
<li><a id="super-skill-5" href="#" class="tooltip" title="TESTING!!!!"></a></li>
</ul>
</div>
<form>
<input type="button" id="showdata"value="Show Data" >


</form>
</body>
</html>

ありがとう

score 1 · Accepted Answer

配列の反復処理は、$。each関数で実行できます。配列からセットを作成するdivには、次の方法を使用できます。

myArray-divを作成する配列、 #divContainer-新しいdivを配置する要素のID

1）追加を使用します。新しい要素に適用される属性またはスタイルを設定する必要がある場合に適しています

$.each(myArray, function(elem) {
      $("#divContainer").append($("<div></div>").css("background", "red").html(elem));
});

2）文字列連結を使用します。追加よりも高速です。

var result = "";
$.each(myArray, function(elem) {
        result += "<div>" + elem + "</div>";
    });
$("#divContainer").append($(result));

3）jquery.tmplの使用-jQueryのテンプレートプラグイン。高速でシンプルな方法ですが、追加のプラグインが必要です

$.tmpl("{{each}}<div>{{html $value}}",
       myArray)
 .appendTo("#divContainer" );

score 0 · Accepted Answer

テストするためにAJAX呼び出しを削除しました。そして、これはループで機能するようです：

for (var i = 0; i < 5; i++) {      
    $('#super-skill-' + i).animate( { height:sampleData[i] + 'px' } );
}

sampleDataのインデックスをidのインデックスと一致させることをお勧めします。

<li><a id="super-skill-0" href="#" class="tooltip" title=sampleData[0]></a></li>
<li><a id="super-skill-1" href="#" class="tooltip" title="TESTING!!!!"></a></li>
<li><a id="super-skill-2" href="#" class="tooltip" title="TESTING!!!!"></a></li>
<li><a id="super-skill-3" href="#" class="tooltip" title="TESTING!!!!"></a></li>
<li><a id="super-skill-4" href="#" class="tooltip" title="TESTING!!!!"></a></li>

score 0 · Accepted Answer

サンプルデータが（配列として）応答からのものである場合は、次のことができます。

for (var i in response) {
    var newDiv = $('<div id="super-skill-'+i+'"/>)
    $('#parentDiv').append(newDiv);
    newDiv.animate( { height:sampleData[i] + 'px' } );
}

score 0 · Accepted Answer

実際にあなたの質問に答えるのではなく、少しおまけです。

アニメーションまたはcss、幅、高さなどにpxを追加する必要はありません。ユニットを省略した場合、jQueryはpxを想定します。

あなたのもの

$('#super-skill-' + i).animate( { height:sampleData[i] + 'px' } );

例

$('#foo').animate({top: 100, left: 80 }, 1200);

http://jsfiddle.net/UqPmB/

score 0 · Accepted Answer

$ .each関数を使用して、li/anchorタグを動的にループして追加できます。

var sampleData = [25, 7, 19, 22, 150,60,99,56];

$('input[type=button]').click(function() {
    $.each(sampleData, function(i, v) { // loop through each item in array 
                        //i=indexInArray,v=valueOfElement
        var $lis = $('<li><a></a></li>'); // create new li's with children anchors
        $lis.find('a') // find anchor
            .attr('id', 'super-skill-' + (i + 1)) // add id
            .attr('href', '#') // add href
            .attr('title', v) // add title
            .addClass('tooltip'); // add class tooltip
        $('div.the-container ul').append($lis); // add to ul
        $('#super-skill-'+ (i + 1)).animate( { height:v  } ,1000);  // animate
    });
});

JSFIDDLE

score 0 · Accepted Answer

別のアプローチ

gRaphaëlのように、チャートを描画するために特別に設計されたライブラリを使用することを検討しましたか？

gRaphaëlを使用すると、次のように記述できます。

r.barchart(10, 10, 400, 250, [sampleData]);

そして、sampleDataにある要素の数、それらを反復する方法、それらをスケーリングする方法、可変数を考慮したバーの適切な幅、最大値は何であるかを気にしないので、スケーリングする方法を知っています縦など。

これは、ホバーに表示される値を含めたプログラムの外観です。

棒グラフの例

var sampleData = [25,7,19,22,150,200,25,77,30,105,5];

var r = Raphael("chart");

// hover handlers:                      
function fin() {
    this.flag = r.popup(this.bar.x, this.bar.y,
                  this.bar.value || "0").insertBefore(this);
}
function fout() {
    this.flag.animate({
        opacity: 0
    }, 600, function() {
        this.remove();
    });
}

r.barchart(10, 10, 400, 250, [sampleData]).hover(fin, fout);

以上です。

デモを見る

（ホバーイベントハンドラーは、gRaphaëlWebサイトの例のハンドラーを変更したものです。）

Firefox 3.0以降、Safari 3.0以降、Opera 9.5以降、InternetExplorer6.0以降で動作します。

javascript - 編集：どうすれば動的にdivを作成できますか？

6 に答える 6

別のアプローチ

Related

Reference