카테고리 분류별 나타내는 자바스크립트 소스 확인 부탁 드립니다.

카테고리 분류별 나타내는 자바스크립트 소스 확인 부탁 드립니다.

QA

카테고리 분류별 나타내는 자바스크립트 소스 확인 부탁 드립니다.

본문

아래는 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>

이 질문에 댓글 쓰기 :

답변 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');  

});

});

댓글 너무 감사드립니다.
죄송하지만 한가지만 더 도움 부탁 드릴께요...
.article_skin 이 지금 예제로 올린 글에는 2개가 있지만
실제 적용할 페이지에는 여려개가 반복되어 있거든요
주신 소스로 적용을 해보면 첫번째 검색된 1개의 글만 나타납니다... ㅜ,ㅠ
여러개일때의 소스한번더 부탁 드릴께요...

처음부터 잘올렸어야 하는데 설명부족하게 질문 올려서 죄송합니다...

​$(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');
            });
        } 
    });
});

답변을 작성하시기 전에 로그인 해주세요.
전체 0
QA 내용 검색
  • 개별 목록 구성 제목 답변작성자조회작성일
  • 질문이 없습니다.

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT