Koşullu döngü mantığına sahip CSS

4 div var ve bunların her biri için arka planını 1 div yeşil, altın ve 2 div kırmızı gibi bu nesneye göre uygulamak zorundayım. Tix_pax sıfır olduğu için kahverengi orada olmamalıdır. Css() yöntemini biliyorum ama döngü mantığının nasıl çalıştığını bilmiyordum.Koşullu döngü mantığına sahip 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 
    } 
]

kaynak

2016-03-29 Jennifer

Eğer 'if' koşulunu kullanabilirsiniz, döngü numaranıza bağlıdır. – mmativ

html örneğini de paylaşabilirsiniz –

@ArunPJohny div'in dinamik sayısı, kullanıcıların seçimine benzediğini hayal edin. bu yüzden de 10 div, 3 kırmızı, 5 yeşil, 2 mavi olabilir. – Jennifer

Sanırım Sass kullanarak benzer bir şeyi başarabilirsiniz. "@for" bölümünde başlayarak burayı kontrol edin: http://thesassway.com/intermediate/if-for-each-while

kaynak

2016-03-29 02:58:06 zomp

Bu nesne dizisine bir id özelliği eklerseniz, her div'i ayrı ayrı seçin ve ilgili rengi uygulayın. Eğer div en görünmesini veya istediğiniz yere onları sayfasında yer istiyorum nasıl

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 
})

kaynak

2016-03-29 03:02:41 joemillervi

nope örneğiyle ilgili daha iyi bir açıklama verdiyseniz daha yararlı olur. div sayısı burada dinamik. – Jennifer

Her nesne için bir div oluşturmanız mı gerekiyor? – joemillervi

Sen

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>

kaynak

2016-03-29 03:07:55

Dilim burada nasıl çalışır? Ben verilen jQuery nesnesinden – Jennifer

@Jennifer http://api.jquery.com/slice/ - mantığını alamıyorum. –

@Jennifer arasındaki eleman ile yeni bir nesneyi ayıklayacaktır. –

Gerçekten emin değilim gibi bir döngü kullanabilirsiniz. Verileriniz geçerli JSON'tur, bu yüzden onu ayrıştırdım. Ben tix_pax sıfırdan büyük

ise div div '#container' ve verileri üzerinden irade döngü aşağıdaki kodu yapılmış ve '#container' istediğiniz background-color ile tix_pax göre div doğru sayıda eklemek

<!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>

kaynak

2016-03-29 03:30:18 Patriotec

Koşullu döngü mantığına sahip CSS

cevap

İlgili konular