클릭시 색변환 질문
본문
faq에 클릭한걸 색변환을 줘서 유지시키려고
<li<?php echo $category_class; ?> class="asd" style="float:left; list-style:none; margin:5px;">
<a href="<?php echo $category_href;?>?fm_id=<?php echo $v['fm_id'];?>"><?php echo $v['fm_subject']; ?></a>
</li>
<?php
}
?>
</ul>
</div>
</nav>
<?php } ?>
<script>
$(function(){
$('.asd').css('backgroundColor', 'red');
});
</script>
이렇게 li에 class"asd"를 주고 function을 실행했는데 왜 클릭한거만 흰색이 되고 클릭 안한게 빨강색으로 될까요.... 정반대로 돼서 문제가 먼지 모르겠네요ㅠㅠ
좀 바꿔서 해봤더니 클릭 할때만 색이 바뀌고 다른거 클릭할때까지 유지가 안돼요...
답변 1
간단하게 생각하면
1. 클릭 이벤트
2. 색상 변경
이렇게 두가지로 나뉘어지는데 현재 작성하신것은 클릭 이벤트에 대한것이 아니네요...
위에 작성하신것은 "https://mine-it-record.tistory.com/288" 여기를 참조하시면 뭔지 정확히 하실거 같습니다.
그리고 클릭 이벤트는 "https://www.everdevel.com/jQuery/click/" 여기 참조 하시면 이렇게 되겠죠
$('.asd').click(function(){
//클릭 시 레드로 변경
$(this).css('backgroundColor', 'red');
});
그럼 이제 기존에 레드인 경우는 어떻게 해야할까요? 지금 저 코드를 활용하자면 red인지를 체크를해서 red이면 기존 색상으로 변경을 해야합니다.
css작성하신것 외에 다른 방법을 쓰는거를 추천드리는데 jquery toggleclass입니다.
"https://www.codingfactory.net/10295" 여기 참고 해서 보시면 될것 같습니다.