网格视图列表视图切换

Question

I currently have a page that list products in list format I would like to be able to toggle between the two views. The list is populated dynamically.

Below their is a static ul and I would like to populate dynamically.

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

<table style="float: right;">
                    <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>
                    </tr>
                </table>

   `

</div>