jQuery - 검색 결과보기 - List & Grid

Question

저는 jQuery를 처음 접했고 사용자가 목록과 격자보기간에 전환 할 수있는 결과 페이지를 만들고 있습니다. 그것은 작동하는 것하지만 많은 결과가있을 때 버그 것 같습니다. 왜이게 될지 누가 알 수 있습니까?

CODEPEN DEMO

어떤 도움

이 많이 주시면 감사하겠습니다.

JS

$('.btn.grid').click(function() { 
     if (!$(this).hasClass("active")) { 
     $(this).addClass("active"); 
     $('.results-wrapper .grid_12').removeClass("grid_12").addClass("grid_3"); 
     $('.wrapper .results').addClass("grid-view-active"); 
     if ($(".btn.list").hasClass("active")) { 
      $(".btn.list").removeClass("active"); 
      $('.wrapper .results').removeClass("list-view-active"); 
     } 
     } 
    }); 
    $('.btn.list').click(function() { 
     if (!$(this).hasClass("active")) { 
     $(this).addClass("active"); 
     $('.results-wrapper .grid_3').removeClass("grid_3").addClass("grid_12"); 
     $('.wrapper .results').addClass("list-view-active"); 
     if ($(".btn.grid").hasClass("active")) { 
      $(".btn.grid").removeClass("active"); 
      $('.wrapper .results').removeClass("grid-view-active"); 
     } 
     } 
    }); 

HTML

<span class="btn grid active">grid</span> 
<span class="btn list">list</span> 

<div class="wrapper"> 
    <div class="results-wrapper"> 
    <ul class="results"> 
     <li class="grid_3"> 
     <h1>Title</h1> 
     <img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/> 
     </li> 
     <li class="grid_3"> 
     <h1>Title</h1> 
     <img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/> 
     </li> 
     <li class="grid_3"> 
     <h1>Title</h1> 
     <img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/> 
     </li> 
     <li class="grid_3"> 
     <h1>Title</h1> 
     <img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/> 
     </li> 
     <li class="grid_3"> 
     <h1>Title</h1> 
     <img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/> 
     </li> 
     <li class="grid_3"> 
     <h1>Title</h1> 
     <img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/> 
     </li> 
     <li class="grid_3"> 
     <h1>Title</h1> 
     <img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/> 
     </li> 
     <li class="grid_3"> 
     <h1>Title</h1> 
     <img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/> 
     </li> 
     <li class="grid_3"> 
     <h1>Title</h1> 
     <img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/> 
     </li> 
     <li class="grid_3"> 
     <h1>Title</h1> 
     <img src="http://rosherunwoven.co.uk/images/Nike%20Free%20Trainer%205.0%20Mens%20Trainers%20Black.jpg"/> 
     </li> 
    </ul> 
    </div> 
</div> 

CSS

.btn { 
    background: #ccc; 
    cursor: pointer; 
    display: inline-block; 
    height: 35px; 
    width: 35px; 
} 
.btn.active { 
    background: red; 
} 
li { 
    float: left; 
    height: 200px; 
    width: 200px; 
} 
li img { 
    max-width: 100%; 
    max-height: 100%; 
} 
.grid_3 { 
    width: 25%; 
} 
.grid_12 { 
    width: 100%; 
} 

Answer 1

var gridButton = $('.btn.grid'); 
var listButton = $('.btn.list'); 
var isGridActive = true; 

gridButton.click(function() { 
    if(!isGridActive) { 
    toggleFunction(); 
    } 
}); 


listButton.click(function() { 
    if(isGridActive) { 
    toggleFunction(); 
    } 
}); 

var toggleFunction = function(){ 
    listButton.toggleClass("active"); 
    gridButton.toggleClass("active"); 

    if(isGridActive) { 
    $('.results-wrapper .grid_3').removeClass("grid_3").addClass("grid_12"); 
    $('.wrapper .results').addClass("list-view-active").removeClass("grid-view-active"); 
    } else { 
    $('.results-wrapper .grid_12').removeClass("grid_12").addClass("grid_3"); 
     $('.wrapper .results').addClass("grid-view-active").removeClass("list-view-active"); 
    } 
    isGridActive = !isGridActive; 
}; 

사람이 문은 더 나은 그 우수한 될 경우 있는지 확인 할 수 있습니다.