카테고리 분류별 나타내는 자바스크립트 소스 확인 부탁 드립니다.
본문
아래는 javascript 와 html 부분인데요
카테고리 분류별 나타내는 자바스크립트 소스를 만들려합니다.
미완성 부분을 어떻게 작성해야 정상작동될지 도움부탁 드립니다.
비교하여 값을 포함하고 있으면 나타내야 할것 같은데 지식이 부족합니다...ㅜ.ㅠ
<script type="text/javascript">
$(document).ready(function(){
$("#category a").click(function(e){
e.preventDefault();
var category = $(this).text(); // 클릭된 대상의 카테고리 값을 category 변수에 반환합니다.
$(".article_skin").fadeOut("slow"); // 우선 list들을 모두 숨김
if(category == "all"){$(".article_skin").fadeIn("slow");} // all 선택시 모두 보임
else{ // all 아니면
##이부분을 어떻게 작성해야 하는지 모르겠습니다..##
} // 해당카테고리와 같은 분류는 나타내기
});
});
</script>
<div id="category">
<h3>카테고리</h3>
<ul>
<li><a>all</a></li>
<li><a>외관순환고속도로</a></li>
<li><a>참새방앗간</a></li>
</ul>
</div>
<div class="article_skin">
<div class="list_content">
<div class="list_body">
<div class="detail_info">
<a href="/category/%EC%99%B8%EA%B4%80%EC%88%9C%ED%99%98%EA%B3%A0%EC%86%8D%EB%8F%84%EB%A1%9C/%EB%A7%89%ED%9E%88%EB%8A%94%EA%B8%B8" class="link_cate"><i class="fa fa-folder-open-o fa-1x" aria-hidden="true"> 외관순환고속도로/막히는길</i></a>
</div>
<div class="list_tit">
<a href="/">
<strong class="tit_post">순간의 일이 그대의 먼 장래를 결정한다.</strong>
</a>
</div>
<a href="/" class="link_post">
<p class="txt_post">오늘의 맑은 이 아침, 이 순간에 그대의 행동을 다스리라.순간의 일이 그대의 먼 장래를 결정한다.오늘 즉시 한 가지 행동을 결정하라.나쁜 습관을 버리고 좋은 습관을 가져야 한다.오늘 그릇된 한 가지 습관을 고치는 것은새롭고 강한 성격으로 출발한다는 것을 의미한다.새로운 습관은 새로운 운명을 열어줄 것이다.오늘의 맑은 이 아침, 이 순간에 그대의 행동을 다스리라.순간의 일이 그대의 먼 장래를 결정한다.오늘 즉시 한 가지 행동을 결정하라.나쁜 습관을 버..</p>
</a>
</div>
</div>
</div>
<div class="article_skin">
<div class="list_content">
<div class="list_body">
<div class="detail_info">
<a href="/category/%EC%99%B8%EA%B4%80%EC%88%9C%ED%99%98%EA%B3%A0%EC%86%8D%EB%8F%84%EB%A1%9C/%EB%A7%89%ED%9E%88%EB%8A%94%EA%B8%B8" class="link_cate"><i class="fa fa-folder-open-o fa-1x" aria-hidden="true"> 참새방앗간/방앗간</i></a>
</div>
<div class="list_tit">
<a href="/">
<strong class="tit_post">이 순간에 그대의 행동을 다스리라.</strong>
</a>
</div>
<a href="/" class="link_post">
<p class="txt_post">순간의 일이 그대의 먼 장래를 결정한다.오늘 즉시 한 가지 행동을 결정하라.나쁜 습관을 버리고 좋은 습관을 가져야 한다.오늘 그릇된 한 가지 습관을 고치는 것은새롭고 강한 성격으로 출발한다는 것을 의미한다.새로운 습관은 새로운 운명을 열어줄 것이다.오늘의 맑은 이 아침, 이 순간에 그대의 행동을 다스리라.순간의 일이 그대의 먼 장래를 결정한다.오늘 즉시 한 가지 행동을 결정하라.나쁜 습관을 버..</p>
</a>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#category a").click(function(e){
e.preventDefault();
var category = $(this).text(); // 클릭된 대상의 카테고리 값을 category 변수에 반환합니다.
$(".article_skin").fadeOut("slow"); // 우선 list들을 모두 숨김
if(category == "all"){$(".article_skin").fadeIn("slow");} // all 선택시 모두 보임
else{ // all 아니면
##이부분을 어떻게 작성해야 하는지 모르겠습니다..##
} // 해당카테고리와 같은 분류는 나타내기
});
});
</script>
<div id="category">
<h3>카테고리</h3>
<ul>
<li><a>all</a></li>
<li><a>외관순환고속도로</a></li>
<li><a>참새방앗간</a></li>
</ul>
</div>
<div class="article_skin">
<div class="list_content">
<div class="list_body">
<div class="detail_info">
<a href="/category/%EC%99%B8%EA%B4%80%EC%88%9C%ED%99%98%EA%B3%A0%EC%86%8D%EB%8F%84%EB%A1%9C/%EB%A7%89%ED%9E%88%EB%8A%94%EA%B8%B8" class="link_cate"><i class="fa fa-folder-open-o fa-1x" aria-hidden="true"> 외관순환고속도로/막히는길</i></a>
</div>
<div class="list_tit">
<a href="/">
<strong class="tit_post">순간의 일이 그대의 먼 장래를 결정한다.</strong>
</a>
</div>
<a href="/" class="link_post">
<p class="txt_post">오늘의 맑은 이 아침, 이 순간에 그대의 행동을 다스리라.순간의 일이 그대의 먼 장래를 결정한다.오늘 즉시 한 가지 행동을 결정하라.나쁜 습관을 버리고 좋은 습관을 가져야 한다.오늘 그릇된 한 가지 습관을 고치는 것은새롭고 강한 성격으로 출발한다는 것을 의미한다.새로운 습관은 새로운 운명을 열어줄 것이다.오늘의 맑은 이 아침, 이 순간에 그대의 행동을 다스리라.순간의 일이 그대의 먼 장래를 결정한다.오늘 즉시 한 가지 행동을 결정하라.나쁜 습관을 버..</p>
</a>
</div>
</div>
</div>
<div class="article_skin">
<div class="list_content">
<div class="list_body">
<div class="detail_info">
<a href="/category/%EC%99%B8%EA%B4%80%EC%88%9C%ED%99%98%EA%B3%A0%EC%86%8D%EB%8F%84%EB%A1%9C/%EB%A7%89%ED%9E%88%EB%8A%94%EA%B8%B8" class="link_cate"><i class="fa fa-folder-open-o fa-1x" aria-hidden="true"> 참새방앗간/방앗간</i></a>
</div>
<div class="list_tit">
<a href="/">
<strong class="tit_post">이 순간에 그대의 행동을 다스리라.</strong>
</a>
</div>
<a href="/" class="link_post">
<p class="txt_post">순간의 일이 그대의 먼 장래를 결정한다.오늘 즉시 한 가지 행동을 결정하라.나쁜 습관을 버리고 좋은 습관을 가져야 한다.오늘 그릇된 한 가지 습관을 고치는 것은새롭고 강한 성격으로 출발한다는 것을 의미한다.새로운 습관은 새로운 운명을 열어줄 것이다.오늘의 맑은 이 아침, 이 순간에 그대의 행동을 다스리라.순간의 일이 그대의 먼 장래를 결정한다.오늘 즉시 한 가지 행동을 결정하라.나쁜 습관을 버..</p>
</a>
</div>
</div>
</div>
답변 1
$(document).ready(function(){
$('#category li').click(function(){
var category = $(this).index();
$('.article_skin').fadeOut('slow');
if (category)
$('.article_skin').eq(category-1).fadeIn('slow');
else
$('.article_skin').fadeIn('slow');
});
});
답변을 작성하시기 전에 로그인 해주세요.