CSSでXMLデータを変数として使用する方法は？

Question

技術的な理由でデータベースに入れられないデータの表示を開発したいので、XMLは私の唯一の解決策であるようです。私はx/y軸のグラフ上に要素を表示する必要があります。各要素はクリック可能になり、詳細情報を含むdivが開きます。カリカリのx軸（0-100）と緑の軸（0-100）に基づいて表示される果物のリストを想像してください。クリックすると、栄養情報や写真などを見ることができます（少しでも何かlike this私は要素の位置を定義するためにXMLでのxの値とyのデータを使用する方法があるだろうと期待していた

<fruit_list> 
    <fruit> 
    <name>Orange</name> 
    <xaxis>7</xaxis> 
    <yaxis>5</yaxis> 
    <description>round and orange and not crunchy</description> 
    </fruit> 
    <fruit> 
    <name>Granny Smith apple</name> 
    <xaxis>85</xaxis> 
    <yaxis>90</yaxis> 
    <description>round and green and crunchy</description> 
    </fruit> 
</fruit_list> 

：）

XMLは、このようなものになるだろうCSS。私はXMLで多くの経験を積んでいないことを認めなければなりません。単純な表にデータを表示するためにしか使用していません。誰でもアイデアはありますか？

Answer 1

これは私のアイデアですが、x & y軸のカスタム範囲に異なるCSSクラスを使用することができます。

たとえば、90-100クラスが

.x90-100_y90-100{ 
    /*Your CSS comes here...*/ 
} 

範囲90-100（x）及び80-89（y）を有する（x）及び90-100（Y）はその範囲を定義することができクラス

.x90-100_y80-89{ 
    /*Your CSS comes here...*/ 
} 

... 

そうです。

次に、XMLファイルからHTML要素を作成する関数で、HTML要素（JS、PHPなど）にクラスをアサインすることができます。

これはあなたを助けるかもしれません:)