网格视图列表视图切换

Question

我目前有一个以列表格式列出产品的页面我希望能够在两个视图之间切换。该列表是动态填充的。

在它们下面是一个静态ul，我想动态填充。

$('button').on('click',function(e) { 
    if ($(this).hasClass('grid')) { 
     $('#container ul').removeClass('list').addClass('grid'); 
    } 
    else if($(this).hasClass('list')) { 
     $('#container ul').removeClass('grid').addClass('list'); 
    } 
}); 

<div id="container"> 
    <div class="buttons"> 
     <button class="grid">Grid View</button> 
     <button class="list">List View</button> 
    </div> 

    <ul class="list"> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
     <li>Item 4</li> 
     <li>Item 5</li> 
     <li>Item 6</li>`enter code here` 
     <li>Item 7</li> 
    </ul> 
</div>  

Answer 1

<script type="text/javascript"> 
 
\t $(document).ready(function(){ 
 
\t $("a.switcher").bind("click", function(e){ 
 
\t \t e.preventDefault(); \t \t 
 
\t \t var theid = $(this).attr("id"); 
 
\t \t var theproducts = $("ul#products"); 
 
\t \t var classNames = $(this).attr('class').split(' '); 
 
\t \t if($(this).hasClass("active")) { 
 
\t \t \t return false; 
 
\t \t } else { 
 
    \t \t \t if(theid == "gridview") { 
 
\t \t \t \t $(this).addClass("active"); 
 
\t \t \t \t $("#listview").removeClass("active"); 
 
\t \t \t \t $("#listview").children("img").attr("src","images/list-view.png"); 
 
\t \t \t \t var theimg = $(this).children("img"); 
 
\t \t \t \t theimg.attr("src","images/grid-view-active.png"); 
 
\t \t \t \t theproducts.removeClass("list"); 
 
\t \t \t \t theproducts.addClass("grid"); 
 
\t \t \t } \t \t \t 
 
\t \t \t else if(theid == "listview") { 
 
\t \t \t \t $(this).addClass("active"); 
 
\t \t \t \t $("#gridview").removeClass("active"); \t \t \t \t \t 
 
\t \t \t \t $("#gridview").children("img").attr("src","images/grid-view.png"); \t \t \t \t \t 
 
\t \t \t \t var theimg = $(this).children("img"); 
 
\t \t \t \t theimg.attr("src","images/list-view-active.png"); 
 
\t \t \t \t theproducts.removeClass("grid") 
 
\t \t \t \t theproducts.addClass("list"); 
 
\t \t \t } 
 
\t \t } 
 
\t }); 
 
}); 
 
</script>

<table style="float: right;"> 
 
\t \t \t \t \t <tr><td><a href="#" id="gridview" class="switcher"><img src="images/grid-view.png" alt="Grid"></a></td><td>&nbsp;&nbsp;</td><td><a href="#" id="listview" class="switcher active"><img src="images/list-view-active.png" alt="List"></a></td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t </table>

    `