리스트 카테고리명에 색깔 다르게 주기
본문
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을 추가해라
라고 어떻게 말을 하면 될까요? ㅠㅠ
답변 1
다음 코드가 도움이 될지 모르겠습니다.
<?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
}
?>
답변을 작성하시기 전에 로그인 해주세요.