条件付きループロジックを使用したCss

4つのdivがあり、1 divが緑、金、2つのdivが赤のように、このオブジェクトの配列に従ってそれぞれの背景を適用する必要があります。 tix_paxがゼロであるので、Brownはそこにはいけません。私はcss（）メソッドを知っていますが、どのようにループロジックが動作するのか分かりませんでした。条件付きループロジックを使用したCss

[ 
    { 
    "tix_type": "adult", 
    "bg": "gold", 
    "tix_pax": 1 
    }, 
    { 
    "tix_type": "child", 
    "bg": "brown", 
    "tix_pax": 0 
    }, 
    { 
    "tix_type": "senior", 
    "bg": "red", 
    "tix_pax": 2 
    }, 
    { 
    "tix_type": "disabled", 
    "bg": "green", 
    "tix_pax": 1 
    } 
]

出典

2016-03-29 Jennifer

あなたは 'if'条件を使うことができます、あなたのループの数に依存します。 – mmativ

あなたもhtmlサンプルを共有できますか？ –

@ArunPJohny divの数は動的です。ユーザーの選択と同じであると想像してください。私は10 divs、3は赤、5は緑、2は青です。 – Jennifer

私はSassを使用して同様のことを達成できると思います。 http://thesassway.com/intermediate/if-for-each-while

出典

2016-03-29 02:58:06 zomp

このオブジェクトの配列にidプロパティを追加すると、ループするのが簡単になります。各divを個別に選択し、対応する色を適用します。

var objs = [ 
    { 
    "id": "div1", 
    "tix_type": "adult", 
    "bg": "gold", 
    "tix_pax": 1 
    }, 
    { 
    "id": "div2", 
    "tix_type": "child", 
    "bg": "brown", 
    "tix_pax": 0 
    }, 
    { 
    "id": "div3", 
    "tix_type": "senior", 
    "bg": "red", 
    "tix_pax": 2 
    }, 
    { 
    "id": "div4", 
    "tix_type": "disabled", 
    "bg": "green", 
    "tix_pax": 1 
    } 
] 

objs.forEach(function(ob) { 
    var div = document.selectElementById(obj.id) 
    div.style.backgroundColor = obj.bg 
})

出典

2016-03-29 03:02:41 joemillervi

のほうがわかりにくい場合は、もっと役に立ちます。ここでdivの数は動的です。 – Jennifer

オブジェクトごとにdivを作成する必要がありますか？ – joemillervi

あなたは

本当に

var array = [{ 
 
    "tix_type": "adult", 
 
    "bg": "gold", 
 
    "tix_pax": 2 
 
}, { 
 
    "tix_type": "child", 
 
    "bg": "brown", 
 
    "tix_pax": 0 
 
}, { 
 
    "tix_type": "senior", 
 
    "bg": "red", 
 
    "tix_pax": 6 
 
}, { 
 
    "tix_type": "disabled", 
 
    "bg": "green", 
 
    "tix_pax": 2 
 
}]; 
 

 

 
var pos = 0, 
 
    $targets = $('.target'); 
 
array.forEach(function(obj, idx) { 
 
    snippet.log('color elements between '+pos +' and ' + (pos+obj.tix_pax)+' as '+obj.bg) 
 
    $targets.slice(pos, pos + obj.tix_pax).css('background-color', obj.bg); 
 
    pos += obj.tix_pax; 
 
});

.target { 
 
    margin-bottom: 5px; 
 
    min-height: 10px; 
 
    border: 1px solid grey; 
 
}

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> 
 
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="target"></div> 
 
<div class="target"></div> 
 
<div class="target"></div> 
 
<div class="target"></div> 
 
<div class="target"></div> 
 
<div class="target"></div> 
 
<div class="target"></div> 
 
<div class="target"></div> 
 
<div class="target"></div> 
 
<div class="target"></div>

出典

2016-03-29 03:07:55

ここでスライスはどのように機能しますか？私は論理を得ることができません – Jennifer

@ジェニファーhttp://api.jquery.com/slice/ - 指定されたjQueryオブジェクトから、指定されたインデックス間の要素を持つ新しいオブジェクトを抽出します –

@ジェニファー結果のログを参照 –

ないあなたがのdivのを表示するか、あなたがそれらをページに配置したい場所かどうかはわかりのようなループを使用することができます。あなたはデータが有効なJSONなので、私はそれを解析しました。私はdiv '#container'を作成し、下のコードはあなたのデータをループし、tix_paxがゼロより大きい場合、 '#container' divに必要な背景色を持つtix_paxに従ってdivsの正しい数を追加します

<!DOCTYPE html> 

<html lang="en"> 

<head> 

<title>Loopy</title> 

<style> 
.tix{ 
width:100px; 
height:50px; 
margin-right:10px; 
float:left; 
} 
</style> 
</head> 

<body> 

<div id="container"></div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 

<script> 
var data = '[{"tix_type": "adult","bg": "gold","tix_pax": 1},{"tix_type": "child", "bg": "brown", "tix_pax": 0 },{"tix_type": "senior", "bg": "red", "tix_pax":2}, {"tix_type": "disabled","bg": "green","tix_pax": 1}]'; 

var $data = JSON.parse(data); 

$.each($data, function(i, v){ 
    if(v.tix_pax>0){ 
     for (var i = 0; i < v.tix_pax; i++) { 
      $('#container').append('<div class="tix" style="background-color:' + v.bg + ';"></div>'); 
     } 
    } 
}); 

</script> 

</body> 

</html>

出典

2016-03-29 03:30:18 Patriotec

条件付きループロジックを使用したCss

答えて

関連する問題