JQuery列表模式大图模式切换

=.= 小菜鸟 大家多多关照 么么哒

将默认列表模式的HTML存储在变量中,从列表模式的HTML动态构造大图模式的HTML内容,存储在变量中

---

$(function() {
            **动态加载图书分类**
            function productList() {
                //创建图书分类数组
                var $list = new Array('中国当代小说(13880)', '中国近现代小...(640)', '中国古典小说(1547)', '四大名著(696)', '港澳台小说(838)', '外国小说(5119)', '侦探/悬疑/推...(2519)', '惊悚/恐怖(798)', '魔幻(369)', '科幻(513)', '武侠(574)', '军事(726)', '情感(6700)', '社会(4855)', '都市(949)', '乡土(99)', '职场(176)', '财经(292)', '官场(438)', '历史(1329)', '影视小说(501)', '作品集(2019)', '世界名著(3273)');
                var html = [];
                //each遍历$list数组
                $.each($list, function(i, e) {
                    //push方法为数组添加元素<li><a href='#e'></a></li>
                    html.push("<li><a href='#'>" + e + "</a></li>");
                })
                //定位到动态添加图书分类的div   join()方法 把数组中所有元素放入一个字符串
                $("#product_catList_class").html(html.join(""));
            };
            productList();
            **列表模式和大图模式切换**
            var $getBookList = $('#product_storyList_content').html();
            //大图模式(从列表的DOM中获取信息)
            function getBigBookList() {
                var $listBookImg = $('#product_storyList_content .product_storyList_content_left');
                var $contents = "";
                $(".product_storyList_content_right").find("ul").each(function(i, e) {
                    var $content = ["<div class='big_img_list'><ul><li class='bookImg'>" + $listBookImg.eq(i).html() + "</li>"];
                    var $print = $(e).children("li").eq(6).find('span');
                    $content.push("<li><dl><dd>" + $print.eq(1).text() + "</dd><dd  class='product_content_delete'>" + $print.eq(2).text() + "</dd><dd>" + $print.eq(0).text() + "</dd></dl></li>")
                    $content.push("<li class='detail'>" + $(e).children("li").eq(5).text() + "</li>")
                    $content.push("<li class='detail'>" + $(e).children("li").eq(2).text() + "</li>")
                    $content.push("<li class='detail'>" + $(e).children("li").eq(1).text() + "</li>")
                    $content.push("<li class='detail'>" + $(e).children("li").eq(3).text() + "</li>")
                    $content.push("<li class='detail'>" + $(e).children("li").eq(4).text() + "</li></ul></div>")
                    $contents += $content.join("");
                })
                return $contents;
            }
            var $bigBookList = getBigBookList();
            //单击列表模式和大图模式进行切换
            $('#product_array').children().click(function() {
                $(this).addClass("click").siblings().removeClass("click");
                //使用attr判断this是列表还是大图
                if($(this).attr("name") == "array") {
                    $('#product_storyList_content').html($getBookList);
                } else if($(this).attr("name") == "bigImg") {
                    $('#product_storyList_content').html($bigBookList);
                    //鼠标悬浮到大图模式图片上的时候 显示隐藏的信息               $("#product_storyList_content").children().find("ul").hover(function() {
                        $(this).addClass("over");
                        $(this).parent().addClass("over");
                    }, function() {
                        $(this).removeClass("over");
                        $(this).parent().removeClass("over");
                    })
                }
            });
        });