0

配列の値を使用して Web ページに入力したいと考えています。値はスパン間のテキストを置き換える必要があります (これは既に機能しています) が、同時に、配列の一部の値を属性として、およびファイル パスの一部として使用する必要があります。最後に、値が条件に一致する場合にのみ何かを置き換える必要があります。

さまざまな方法で配列データを挿入する - どうすればこれを達成できますか?

これは HTML 部分です。

<p><b><span class="weather">weather here</span></b> and 
<span class="temperature">temperature here</span>.</p>
<p><i><span class="color">color here</span></i>.</p>
Here follows is an image loaded according to the data
<img src="fixed_path#weather"></img>. And this should 
have the proper <span color="#color">hue</span>.
<span class="warning"></span>

そして、これは jQuery Javascript の部分です (jsfiddle リンクは以下にあります):

var arr = {
    "weather": "cloudy",
    "color": "#880000",
    "temperature": "hot"
};

$.each(arr, function (key, value) {
    $('.'+key).replaceWith(value);
    // how to replace src path?
    // how to replace text attribute?
    // make the following conditional
    // if($.inArray("temperature.hot", arr) > !=1) {
        $('.warning').replaceWith('Warning!');
    // }
});

jsFiddle リンク

4

1 に答える 1

0

わかりました、私はそれをすべて理解しました。私が扱っているのは実際には連想配列ではなく (Javascript の文字列のようには存在しません)、むしろオブジェクトとプロパティであることを学びました。そのため、"objectname.property" で選択できます。

これが解決策です（jsFiddleは以下にあります）：

CSS:

.colortext {
    color: #00ff00;
}

HTML:

<p><b><span class="weather">weather here</span></b> and 
<span class="temperature">temperature here</span>.</p>
<p><i><span class="color">color here</span></i>.</p>
Here follows is an image loaded according to the data
<img src="" class="imagepath"></img>. And this should 
have the proper <span class="colortext">hue</span>.
<span class="warning">No extreme weather.</span>

Javascript (jQuery):

var arr = {
    "weather": "cloudy",
    "color": "#880000",
    "temperature": "normal",
    "imgagepath": "/path/to/image/"
};

$.each(arr, function (key, value) {
    $('.'+key).replaceWith(value);
    $('.imagepath').attr('src', arr.imagepath);
    $('.colortext').css('color', arr.color);
    if (arr.temperature == 'hot') {
        $('.warning').replaceWith('Heat warning!');
   }
        if (arr.temperature == 'cold') {
        $('.warning').replaceWith("It's freezing.");
   }
});

jsフィドル

于 2013-03-18T08:42:43.220 に答える