카테고리 분류별 나타내는 자바스크립트 소스 확인 부탁 드립니다. 채택완료
미스터짱
8년 전
조회 4,056
아래는 javascript 와 html 부분인데요
카테고리 분류별 나타내는 자바스크립트 소스를 만들려합니다.
미완성 부분을 어떻게 작성해야 정상작동될지 도움부탁 드립니다.
비교하여 값을 포함하고 있으면 나타내야 할것 같은데 지식이 부족합니다...ㅜ.ㅠ
</span></h3><div><div><span style="font-size: 10pt;"><script type="text/javascript"></span></div><div><span style="font-size: 10pt;"> $(document).ready(function(){</span></div><div><span style="font-size: 10pt;"> $("#category a").click(function(e){</span></div><div><span style="font-size: 10pt;"> e.preventDefault();</span></div><div><span style="font-size: 10pt;"> var category = $(this).text(); // 클릭된 대상의 카테고리 값을 category 변수에 반환합니다.</span></div><div><span class="Apple-tab-span" style="white-space: pre; font-size: 10pt;"> </span></div><div><span style="font-size: 10pt;"> $(".article_skin").fadeOut("slow"); // 우선 list들을 모두 숨김</span></div><div><span style="font-size: 10pt;"> if(category == "all"){$(".article_skin").fadeIn("slow");} </span><span style="font-size: 10pt;">// all 선택시 모두 보임</span></div><div><span style="font-size: 10pt;"> else{ // all 아니면</span></div><div><span style="font-size: 10pt;"> ##이부분을 어떻게 작성해야 하는지 모르겠습니다..##</span></div><div><span class="Apple-tab-span" style="white-space: pre; font-size: 10pt;"> </span><span style="font-size: 10pt;">} // 해당카테고리와 같은 분류는 나타내기</span></div><div><span style="font-size: 10pt;"> });</span></div><div><span style="font-size: 10pt;"> });</span></div><div><span style="font-size: 10pt;"></script></span><span class="Apple-tab-span" style="white-space: pre; font-size: 10pt;"> </span></div><div>
</div><div>
</div><div><span style="font-size: 10pt;"> <div id="category"></span></div><div><span style="font-size: 10pt;"> <h3>카테고리</h3></span></div><div><span style="font-size: 10pt;"> <ul></span></div><div><span style="font-size: 10pt;"> <li><a>all</a></li> </span></div><div><span style="font-size: 10pt;"> <li><a>외관순환고속도로</a></li> </span></div><div><span style="font-size: 10pt;"> <li><a>참새방앗간</a></li> </span></div><div><span style="font-size: 10pt;"> </ul></span></div><div><span style="font-size: 10pt;"> </div></span></div><div>
</div><div>
</div><div><span style="font-size: 10pt;"> <div class="article_skin"></span></div><div><span style="font-size: 10pt;"> </span></div><div><span style="font-size: 10pt;"> <div class="list_content"></span></div><div>
</div><div><span class="Apple-tab-span" style="white-space: pre; font-size: 10pt;"> </span></div><div><span style="font-size: 10pt;"> <div class="list_body"></span></div><div><span class="Apple-tab-span" style="white-space: pre; font-size: 10pt;"> </span></div><div><span style="font-size: 10pt;"> <div class="detail_info"></span></div><div><span style="font-size: 10pt;"> <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></span></div><div><span style="font-size: 10pt;"> </span></div><div><span style="font-size: 10pt;"> </div></span><span class="Apple-tab-span" style="white-space: pre; font-size: 10pt;"> </span></div><div><span class="Apple-tab-span" style="white-space: pre; font-size: 10pt;"> </span></div><div><span style="font-size: 10pt;"> <div class="list_tit"></span></div><div><span style="font-size: 10pt;"> <a href="/"></span></div><div><span style="font-size: 10pt;"> <strong class="tit_post">순간의 일이 그대의 먼 장래를 결정한다.</strong></span></div><div><span style="font-size: 10pt;"> </a></span></div><div><span style="font-size: 10pt;"> </div></span></div><div><span class="Apple-tab-span" style="white-space: pre; font-size: 10pt;"> </span></div><div><span class="Apple-tab-span" style="white-space: pre; font-size: 10pt;"> </span></div><div><span style="font-size: 10pt;"> <a href="/" class="link_post"></span></div><div><span style="font-size: 10pt;"> <p class="txt_post">오늘의 맑은 이 아침, 이 순간에 그대의 행동을 다스리라.순간의 일이 그대의 먼 장래를 결정한다.오늘 즉시 한 가지 행동을 결정하라.나쁜 습관을 버리고 좋은 습관을 가져야 한다.오늘 그릇된 한 가지 습관을 고치는 것은새롭고 강한 성격으로 출발한다는 것을 의미한다.새로운 습관은 새로운 운명을 열어줄 것이다.오늘의 맑은 이 아침, 이 순간에 그대의 행동을 다스리라.순간의 일이 그대의 먼 장래를 결정한다.오늘 즉시 한 가지 행동을 결정하라.나쁜 습관을 버..</p></span></div><div><span style="font-size: 10pt;"> </a></span></div><div><span style="font-size: 10pt;"> </div></span><span class="Apple-tab-span" style="white-space: pre; font-size: 10pt;"> </span></div><div>
</div><div><span style="font-size: 10pt;"> </div></span></div><div><span style="font-size: 10pt;"> </span></div><div><span style="font-size: 10pt;"> </div></span></div><div><span class="Apple-tab-span" style="white-space: pre; font-size: 10pt;"> </span></div><div><span class="Apple-tab-span" style="white-space: pre; font-size: 10pt;"> </span><span style="font-size: 10pt;"><div class="article_skin"></span></div><div><span style="font-size: 10pt;"> </span></div><div><span style="font-size: 10pt;"> <div class="list_content"></span></div><div>
</div><div><span class="Apple-tab-span" style="white-space: pre; font-size: 10pt;"> </span></div><div><span style="font-size: 10pt;"> <div class="list_body"></span></div><div><span class="Apple-tab-span" style="white-space: pre; font-size: 10pt;"> </span></div><div><span style="font-size: 10pt;"> <div class="detail_info"></span></div><div><span style="font-size: 10pt;"> <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></span></div><div><span style="font-size: 10pt;"> </span></div><div><span style="font-size: 10pt;"> </div></span><span class="Apple-tab-span" style="white-space: pre; font-size: 10pt;"> </span></div><div><span class="Apple-tab-span" style="white-space: pre; font-size: 10pt;"> </span></div><div><span style="font-size: 10pt;"> <div class="list_tit"></span></div><div><span style="font-size: 10pt;"> <a href="/"></span></div><div><span style="font-size: 10pt;"> <strong class="tit_post">이 순간에 그대의 행동을 다스리라.</strong></span></div><div><span style="font-size: 10pt;"> </a></span></div><div><span style="font-size: 10pt;"> </div></span></div><div><span class="Apple-tab-span" style="white-space: pre; font-size: 10pt;"> </span></div><div><span class="Apple-tab-span" style="white-space: pre; font-size: 10pt;"> </span></div><div><span style="font-size: 10pt;"> <a href="/" class="link_post"></span></div><div><span style="font-size: 10pt;"> <p class="txt_post">순간의 일이 그대의 먼 장래를 결정한다.오늘 즉시 한 가지 행동을 결정하라.나쁜 습관을 버리고 좋은 습관을 가져야 한다.오늘 그릇된 한 가지 습관을 고치는 것은새롭고 강한 성격으로 출발한다는 것을 의미한다.새로운 습관은 새로운 운명을 열어줄 것이다.오늘의 맑은 이 아침, 이 순간에 그대의 행동을 다스리라.순간의 일이 그대의 먼 장래를 결정한다.오늘 즉시 한 가지 행동을 결정하라.나쁜 습관을 버..</p></span></div><div><span style="font-size: 10pt;"> </a></span></div><div><span style="font-size: 10pt;"> </div></span><span class="Apple-tab-span" style="white-space: pre; font-size: 10pt;"> </span></div><div>
</div><div><span style="font-size: 10pt;"> </div></span></div><div><span style="font-size: 10pt;"> </span></div><div><span style="font-size: 10pt;"> </div></span></div></div><div><span style="font-size: 10pt;">
</span></h3><div><div><span style="font-size: 10pt;"><script type="text/javascript"></span></div><div><span style="font-size: 10pt;"> $(document).ready(function(){</span></div><div><span style="font-size: 10pt;"> $("#category a").click(function(e){</span></div><div><span style="font-size: 10pt;"> e.preventDefault();</span></div><div><span style="font-size: 10pt;"> var category = $(this).text(); // 클릭된 대상의 카테고리 값을 category 변수에 반환합니다.</span></div><div><span class="Apple-tab-span" style="white-space: pre; font-size: 10pt;"> </span></div><div><span style="font-size: 10pt;"> $(".article_skin").fadeOut("slow"); // 우선 list들을 모두 숨김</span></div><div><span style="font-size: 10pt;"> if(category == "all"){$(".article_skin").fadeIn("slow");} </span><span style="font-size: 10pt;">// all 선택시 모두 보임</span></div><div><span style="font-size: 10pt;"> else{ // all 아니면</span></div><div><span style="font-size: 10pt;"> ##이부분을 어떻게 작성해야 하는지 모르겠습니다..##</span></div><div><span class="Apple-tab-span" style="white-space: pre; font-size: 10pt;"> </span><span style="font-size: 10pt;">} // 해당카테고리와 같은 분류는 나타내기</span></div><div><span style="font-size: 10pt;"> });</span></div><div><span style="font-size: 10pt;"> });</span></div><div><span style="font-size: 10pt;"></script></span><span class="Apple-tab-span" style="white-space: pre; font-size: 10pt;"> </span></div><div>
</div><div>
</div><div><span style="font-size: 10pt;"> <div id="category"></span></div><div><span style="font-size: 10pt;"> <h3>카테고리</h3></span></div><div><span style="font-size: 10pt;"> <ul></span></div><div><span style="font-size: 10pt;"> <li><a>all</a></li> </span></div><div><span style="font-size: 10pt;"> <li><a>외관순환고속도로</a></li> </span></div><div><span style="font-size: 10pt;"> <li><a>참새방앗간</a></li> </span></div><div><span style="font-size: 10pt;"> </ul></span></div><div><span style="font-size: 10pt;"> </div></span></div><div>
</div><div>
</div><div><span style="font-size: 10pt;"> <div class="article_skin"></span></div><div><span style="font-size: 10pt;"> </span></div><div><span style="font-size: 10pt;"> <div class="list_content"></span></div><div>
</div><div><span class="Apple-tab-span" style="white-space: pre; font-size: 10pt;"> </span></div><div><span style="font-size: 10pt;"> <div class="list_body"></span></div><div><span class="Apple-tab-span" style="white-space: pre; font-size: 10pt;"> </span></div><div><span style="font-size: 10pt;"> <div class="detail_info"></span></div><div><span style="font-size: 10pt;"> <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></span></div><div><span style="font-size: 10pt;"> </span></div><div><span style="font-size: 10pt;"> </div></span><span class="Apple-tab-span" style="white-space: pre; font-size: 10pt;"> </span></div><div><span class="Apple-tab-span" style="white-space: pre; font-size: 10pt;"> </span></div><div><span style="font-size: 10pt;"> <div class="list_tit"></span></div><div><span style="font-size: 10pt;"> <a href="/"></span></div><div><span style="font-size: 10pt;"> <strong class="tit_post">순간의 일이 그대의 먼 장래를 결정한다.</strong></span></div><div><span style="font-size: 10pt;"> </a></span></div><div><span style="font-size: 10pt;"> </div></span></div><div><span class="Apple-tab-span" style="white-space: pre; font-size: 10pt;"> </span></div><div><span class="Apple-tab-span" style="white-space: pre; font-size: 10pt;"> </span></div><div><span style="font-size: 10pt;"> <a href="/" class="link_post"></span></div><div><span style="font-size: 10pt;"> <p class="txt_post">오늘의 맑은 이 아침, 이 순간에 그대의 행동을 다스리라.순간의 일이 그대의 먼 장래를 결정한다.오늘 즉시 한 가지 행동을 결정하라.나쁜 습관을 버리고 좋은 습관을 가져야 한다.오늘 그릇된 한 가지 습관을 고치는 것은새롭고 강한 성격으로 출발한다는 것을 의미한다.새로운 습관은 새로운 운명을 열어줄 것이다.오늘의 맑은 이 아침, 이 순간에 그대의 행동을 다스리라.순간의 일이 그대의 먼 장래를 결정한다.오늘 즉시 한 가지 행동을 결정하라.나쁜 습관을 버..</p></span></div><div><span style="font-size: 10pt;"> </a></span></div><div><span style="font-size: 10pt;"> </div></span><span class="Apple-tab-span" style="white-space: pre; font-size: 10pt;"> </span></div><div>
</div><div><span style="font-size: 10pt;"> </div></span></div><div><span style="font-size: 10pt;"> </span></div><div><span style="font-size: 10pt;"> </div></span></div><div><span class="Apple-tab-span" style="white-space: pre; font-size: 10pt;"> </span></div><div><span class="Apple-tab-span" style="white-space: pre; font-size: 10pt;"> </span><span style="font-size: 10pt;"><div class="article_skin"></span></div><div><span style="font-size: 10pt;"> </span></div><div><span style="font-size: 10pt;"> <div class="list_content"></span></div><div>
</div><div><span class="Apple-tab-span" style="white-space: pre; font-size: 10pt;"> </span></div><div><span style="font-size: 10pt;"> <div class="list_body"></span></div><div><span class="Apple-tab-span" style="white-space: pre; font-size: 10pt;"> </span></div><div><span style="font-size: 10pt;"> <div class="detail_info"></span></div><div><span style="font-size: 10pt;"> <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></span></div><div><span style="font-size: 10pt;"> </span></div><div><span style="font-size: 10pt;"> </div></span><span class="Apple-tab-span" style="white-space: pre; font-size: 10pt;"> </span></div><div><span class="Apple-tab-span" style="white-space: pre; font-size: 10pt;"> </span></div><div><span style="font-size: 10pt;"> <div class="list_tit"></span></div><div><span style="font-size: 10pt;"> <a href="/"></span></div><div><span style="font-size: 10pt;"> <strong class="tit_post">이 순간에 그대의 행동을 다스리라.</strong></span></div><div><span style="font-size: 10pt;"> </a></span></div><div><span style="font-size: 10pt;"> </div></span></div><div><span class="Apple-tab-span" style="white-space: pre; font-size: 10pt;"> </span></div><div><span class="Apple-tab-span" style="white-space: pre; font-size: 10pt;"> </span></div><div><span style="font-size: 10pt;"> <a href="/" class="link_post"></span></div><div><span style="font-size: 10pt;"> <p class="txt_post">순간의 일이 그대의 먼 장래를 결정한다.오늘 즉시 한 가지 행동을 결정하라.나쁜 습관을 버리고 좋은 습관을 가져야 한다.오늘 그릇된 한 가지 습관을 고치는 것은새롭고 강한 성격으로 출발한다는 것을 의미한다.새로운 습관은 새로운 운명을 열어줄 것이다.오늘의 맑은 이 아침, 이 순간에 그대의 행동을 다스리라.순간의 일이 그대의 먼 장래를 결정한다.오늘 즉시 한 가지 행동을 결정하라.나쁜 습관을 버..</p></span></div><div><span style="font-size: 10pt;"> </a></span></div><div><span style="font-size: 10pt;"> </div></span><span class="Apple-tab-span" style="white-space: pre; font-size: 10pt;"> </span></div><div>
</div><div><span style="font-size: 10pt;"> </div></span></div><div><span style="font-size: 10pt;"> </span></div><div><span style="font-size: 10pt;"> </div></span></div></div><div><span style="font-size: 10pt;">
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
8년 전
$(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');
});
});
로그인 후 평가할 수 있습니다
답변에 대한 댓글 2개
�
미스터짱
8년 전
�
슈와이
8년 전
$(document).ready(function(){
$('#category a').click(function(){
var category = $(this).text();
$('.article_skin').fadeOut('slow');
if (category == 'all')
$('.article_skin').fadeIn('slow');
else {
$('.article_skin').each( function() {
if ( $(this).find('.detail_info a').text().indexOf(category) > -1) $(this).fadeIn('slow');
});
}
});
});
$('#category a').click(function(){
var category = $(this).text();
$('.article_skin').fadeOut('slow');
if (category == 'all')
$('.article_skin').fadeIn('slow');
else {
$('.article_skin').each( function() {
if ( $(this).find('.detail_info a').text().indexOf(category) > -1) $(this).fadeIn('slow');
});
}
});
});
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
죄송하지만 한가지만 더 도움 부탁 드릴께요...
.article_skin 이 지금 예제로 올린 글에는 2개가 있지만
실제 적용할 페이지에는 여려개가 반복되어 있거든요
주신 소스로 적용을 해보면 첫번째 검색된 1개의 글만 나타납니다... ㅜ,ㅠ
여러개일때의 소스한번더 부탁 드릴께요...
처음부터 잘올렸어야 하는데 설명부족하게 질문 올려서 죄송합니다...