리스트 카테고리명에 색깔 다르게 주기
본문
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
다음 코드가 도움이 될지 모르겠습니다.
<?php
$list = [
['ca_name' => '사과'],
['ca_name' => '포도'],
['ca_name' => '오렌지'],
];
?>
<style>
.사과 { color: firebrick; }
.포도 { color: purple; }
.오렌지 { color: orange; }
.apple { color: white; background-color: firebrick; }
.grape { color: white; background-color: purple; }
.orange { color: white; background-color: orange; }
</style>
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script>
$(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 {
//
}
});
});
</script>
<h2>unicode class name</h2>
<?php
foreach ($list as $i => $arr) {
?>
<span class="can <?php echo $list[$i]['ca_name'] ?>"><?php echo $list[$i]['ca_name'] ?></span>
<?php
}
?>
<hr>
<h2>add class name by javascript</h2>
<?php
foreach ($list as $i => $arr) {
?>
<span class="can"><?php echo $list[$i]['ca_name'] ?></span>
<?php
}
?>
아래와 같은 식으로 하시면 됩니다. 숫자가 더 많으면 동일한 패턴으로요.
<style>
.apple { color:#ff0000; }
.grape { color:#0000ff; }
</style>
<span class="can">사과</span>
<span class="can">포도</span>
<script>
for (i of document.querySelectorAll(".can")) {
if (i.innerText.trim() == "사과") i.className = "apple";
if (i.innerText.trim() == "포도") i.className = "grape";
}
</script>
반복문 밖에서 처리하는 것이 더 좋습니다.
<script>
$(document).ready(function() {
$('.can').each(function() {
var categoryName = $(this).text().trim();
switch(categoryName) {
case '사과':
$(this).addClass('apple');
break;
case '포도':
$(this).addClass('grape');
break;
}
});
});
</script>
<script>
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];
});
</script>
답변을 작성하시기 전에 로그인 해주세요.