Firebase 데이터베이스의 JSON 데이터를 사용하여 CSS 카드를 만들려고했습니다. 주요 아이디어는 Firebase의 데이터를 사용하는 것입니다. 양식에서 제출할 때마다 CSS 카드를 만들려고합니다.
양식 제출 중에 사용자는 자신이 속한 카테고리를 선택하고 특정 이미지가 CSS 카드에 표시되어야합니다.
CSS 카드가 동적으로 생성되므로 전체 HTML 코드는 JS를 사용하여 빌드됩니다.
먼저 Firebase에서 데이터를 가져오고 함수를 호출하여 CSS 카드를 만드는 코드입니다.
let reference = firebase.database().ref("data-block");
reference.on("value",gotData);
이제 CSS 카드 생성 기능을 확인하십시오.
function gotData(data) {
let x = data.val();
let keys = Object.keys(x);
console.log(keys.length);
var q = 0;
for (let i = 0; i < keys.length; i++) {
let a = keys[i];
let title_a = expens[a].Entry;
let category_a = expens[a].Category;
console.log(title_a, category_a);
let expense = document.querySelector(".card-list");
expense.innerHTML += `
<article class="card">
<header class="card-header">
<h2>${title_a} </h2>
</header>
<div class="card-author">
<a class="author-avatar" href="#">
<img id="x" src=""/>
</a>
<svg class="half-circle" viewBox="0 0 106 57">
<path d="M102 4c0 27.1-21.9 49-49 49S4 31.1 4 4"></path>
</svg>
<div class="author-name">
<div class="author-name-prefix">Author</div>
${category_a}
</div>
</article>
`;
}
}
보시다시피 이미지의 src는 선언되지 않았습니다. 데이터베이스에서 가져온 카테고리에 따라 다른 이미지를 할당하는 방법을 알 수 없었기 때문입니다.
3 개의 이미지가 있습니다.
shopping.png
food.png
learn.png
Firebase의 데이터를 기반으로 이미지 태그에 src를 동적으로 할당하는 방법을 도와주세요.
function getImageByCategory(category) {
if (category == 'shopping') {
return '<img src="shopping.png" />';
} else if (category == 'food') {
return '<img src="food.png" />'
} else if (category == 'learn') {
return '<img src="learn.png" />'
}
}
`
<a class="author-avatar" href="#">
${getImageCategory(category_a)}
</a>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다