리스트 카테고리명에 색깔 다르게 주기 채택완료
jquery로 해보고 있는데요, 리스트가 아래처럼 돼있습니다.
<span class="can"><?php echo $list[$i]['ca_name'] ?></span> 제목들어감
이게 쭉 반복이 되는데요,
ca_name 이 '사과' 일 경우 포함된 span에 apple 이라는 클래스를 추가하고 싶습니다.
<span class="can apple"><?php echo $list[$i]['ca_name'] ?></span>
ca_name 이 '포도' 일 경우 span에 grape 클래스명을 넣고 싶구요.
var test = "<?php echo $list[$i]['ca_name'] ?>" 이렇게 test에 카테고리명을 넣고
만약 test의 값이 '사과' 라면 해당 span에 apple을 추가해라
라고 어떻게 말을 하면 될까요? ㅠㅠ
답변 4개
다음 코드가 도움이 될지 모르겠습니다.
.사과 { color: firebrick; }
.포도 { color: purple; }
.오렌지 { color: orange; }
.apple { color: white; background-color: firebrick; }
.grape { color: white; background-color: purple; }
.orange { color: white; background-color: orange; }
$(function () {
$('span[class="can"]').each(function (i, el) {
var txt = $(el).text();
if (txt == null) {
//
} else if (txt == '사과') {
$(el).addClass('apple');
} else if (txt == '포도') {
$(el).addClass('grape');
} else if (txt == '오렌지') {
$(el).addClass('orange');
} else {
//
}
});
});
unicode class name
add class name by javascript
댓글을 작성하려면 로그인이 필요합니다.
const links = document.querySelectorAll('.can a');
const colors = ['#ff660030', '#ff006630', '#00ff6630', '#6600ff30', '#0066ff30', '#66ff0030', '#ff660030', '#ff006630', '#00ff6630', '#6600ff30'];
links.forEach((link, index) => {
link.style.background = colors[index % colors.length];
});
댓글을 작성하려면 로그인이 필요합니다.
반복문 밖에서 처리하는 것이 더 좋습니다.
$(document).ready(function() {
$('.can').each(function() {
var categoryName = $(this).text().trim();
switch(categoryName) {
case '사과':
$(this).addClass('apple');
break;
case '포도':
$(this).addClass('grape');
break;
}
});
});
댓글을 작성하려면 로그인이 필요합니다.
아래와 같은 식으로 하시면 됩니다. 숫자가 더 많으면 동일한 패턴으로요.
.apple { color:#ff0000; }
.grape { color:#0000ff; }
사과
포도
for (i of document.querySelectorAll(".can")) {
if (i.innerText.trim() == "사과") i.className = "apple";
if (i.innerText.trim() == "포도") i.className = "grape";
}
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인