下記のように、ajaxの結果で動的にradioのリストを生成しているのですが、
cssが反映されず困っております。
動的にstyleを生成するしかないのでしょうか。
html
1<div id="div1" class="c1"/>
css
1.radio1 input[type=radio] { 2 display: none; 3} 4.radio1 label{ 5 box-sizing: border-box; 6 transition: background-color 0.2s linear; 7 position: relative; 8 display: inline-block; 9 margin: 0 20px 8px 0; 10 padding: 12px 12px 12px 42px; 11 width: 100%; 12 border-radius: 8px; 13 background-color: #f6f7f8; 14 vertical-align: middle; 15 cursor: pointer; 16} 17.radio1 label:hover { 18 background-color: #e1ffd4; 19} 20.radio1 label:hover:after { 21 border-color: #b6ed8a; 22} 23.radio1 label:after { 24 transition: border-color 0.2s linear; 25 position: absolute; 26 top: 50%; 27 left: 15px; 28 display: block; 29 margin-top: -10px; 30 width: 16px; 31 height: 16px; 32 border: 2px solid #bbb; 33 border-radius: 50%; 34 content: ''; 35} 36 37.radio1 label:before { 38 transition: opacity 0.2s linear; 39 position: absolute; 40 top: 50%; 41 left: 20px; 42 display: block; 43 margin-top: -5px; 44 width: 10px; 45 height: 10px; 46 border-radius: 50%; 47 background-color: #b6ed8a; 48 content: ''; 49 opacity: 0; 50} 51input[type=radio]:checked + label:before { 52 opacity: 1; 53} 54input[type=radio]:checked + label { 55 background-color: #e1ffd4; 56}
javascript
1 // データを取得 2 $.ajax({ 3 type: 'get', 4 url: 'example.com/hogeapi', 5 data: { 'data1':data1, 'data2':data2 }, 6 dataType: 'json', 7 success: function(resultList) { 8 var div = document.getElementById('div1'); 9 var ul = document.createElement('ul'); 10 ul.class='radio1'; 11 div.textContent = null; 12 div.appendChild(ul); 13 for(value of resultList) { 14 var li = document.createElement('li'); 15 var input = document.createElement('input'); 16 var label = document.createElement('label'); 17 input.setAttribute('type', 'radio'); 18 input.setAttribute('id', value['hoge']); 19 input.value = value['hoge']; 20 label.htmlFor = value['hoge']; 21 label.innerHTML = 'hogehogehoge'; 22 ul.appendChild(li).appendChild(input); 23 ul.appendChild(li).appendChild(label); 24 } 25 } 26 });
回答1件
あなたの回答
tips
プレビュー