选择排序方式将图书进行排序

最新推荐文章于 2020-10-07 16:48:32 发布
原创最新推荐文章于 2020-10-07 16:48:32 发布 · 2.3k 阅读
1 ·
CC 4.0 BY-SA版权
文章标签：
#javascript #js #脚本
javascript 专栏收录该内容
11 篇文章
订阅专栏
<script>
    $(document).ready(function(){
        //排序方式脚本，选择排序方式进行排序
        $("#compositor").change(function(){
            var $select=$(this).val();
            var $book=$(".product_storyList_content_t");
            //按价格升序排序
            if($select=="按价格 升序"){
                //排序：价格升序
                $book.sort(function(a,b){
                    return parseFloat($(a).find(".footer_dull_red span").html().substr(1)) - parseFloat($(b).find(".footer_dull_red span").html().substr(1));
                 });
                //把排序好的书加到列表中去
                $("#storyBooksssss").empty().append($book);
            }
            //按价格降序排序
            else if($select=="按价格 降序"){
                //排序：价格降序
                $book.sort(function(a,b){
                    return parseFloat($(b).find(".footer_dull_red span").html().substr(1)) - parseFloat($(a).find(".footer_dull_red span").html().substr(1));
                });
                //把排序好的书加到列表中去
                $("#storyBooksssss").empty().append($book);
            }
        });
    });
</script>

<!--图书排列开始-->
    <div id="product_storyList_content" class="product_storyList_content">
        <div id="storyBooksssss"><!--使用javaScript显示图书列表--></div>
        <!--列表开始-->
        <div class="product_storyList_content_t">
        <div class="product_storyList_content_left"><img src="images/product_list_01.jpg" alt="图书列表"/></div>
        <div class="product_storyList_content_right">
            <ul>
                <li class="product_storyList_content_dash"><a href="#" class="blue_14">私募（首部披露资本博弈秘密的金融小说）</a></li>
                <li>顾客评分：<img src="images/star_red.gif" alt="star"/><img src="images/star_red.gif" alt="star"/><img src="images/star_red.gif" alt="star"/><img src="images/star_red.gif" alt="star"/><img src="images/star_gray.gif" alt="star"/></li>
                <li>作　者：<a href="#" class="blue_14">郭现杰</a> 著</li>
                <li>出版社：<a href="#" class="blue_14">花山文艺出版社</a></li>
                <li>出版时间：2009年08月</li>
                <li>数年前，在一次股市的多、空之战中，以赵云狄、林康为首的私募基金―金鼎投资，和以王雨龙为首的私募基金，达成锁仓协议分食利益。殊料，以王雨龙为首的私募基金―鑫利投资背信弃义，导致金鼎投资惨败。以至...</li>
                <li>
                    <dl class="product_content_dd">
                        <dd><img src="images/product_buy_02.gif" alt="shopping"/></dd>
                        <dd><img src="images/product_buy_01.gif" alt="shopping"/></dd>
                        <dd>节省：￥13.10</dd>
                        <dd>折扣：<span>59折</span></dd>
                        <dd class="footer_dull_red"><span>￥18.90</span></dd>
                        <dd class="product_content_delete"><span>￥32.00</span></dd>
                    </dl>
                </li>
            </ul>
        </div>
        <div class="product_storyList_content_bottom"></div>
        </div>
        <!--列表开始-->
        <div class="product_storyList_content_t">
        <div class="product_storyList_content_left"><img src="images/product_list_02.jpg" alt="图书列表"/></div>
        <div class="product_storyList_content_right">
            <ul>
                <li class="product_storyList_content_dash"><a href="#" class="blue_14">圈子圈套.1.战局篇 </a></li>
                <li>顾客评分：<img src="images/star_red.gif" alt="star"/><img src="images/star_red.gif" alt="star"/><img src="images/star_red.gif" alt="star"/><img src="images/star_red.gif" alt="star"/><img src="images/star_red2.gif" alt="star"/></li>
                <li>作　者：<a href="#" class="blue_14">王强 </a> 著</li>
                <li>出版社：<a href="#" class="blue_14">清华大学出版社</a></li>
                <li>出版时间：2006年01月</li>
                <li>虽然没有硝烟，却比战场更血腥；虽然并未战死，却比死亡更痛苦。 洪钧从一个底层的销售人员，成为一家著名的跨国公司的中国区代理首席代表，在即将被扶正，事业情感都志得意满的时候，掉入俞威设计的圈套，...</li>
                <li>
                    <dl class="product_content_dd">
                        <dd><img src="images/product_buy_02.gif" alt="shopping"/></dd>
                        <dd><img src="images/product_buy_01.gif" alt="shopping"/></dd>
                        <dd>节省：￥8.90</dd>
                        <dd>折扣：<span>68折</span></dd>
                        <dd class="footer_dull_red"><span>￥19.10</span></dd>
                        <dd class="product_content_delete"><span>￥28.00</span></dd>
                    </dl>
                　</li>
            </ul>
        </div>
        <div class="product_storyList_content_bottom"></div>
        </div>
        <!--列表开始-->
        <div class="product_storyList_content_t">
        <div class="product_storyList_content_left"><img src="images/product_list_03.jpg" alt="图书列表"/></div>
        <div class="product_storyList_content_right">
            <ul>
                <li class="product_storyList_content_dash"><a href="#" class="blue_14">饕餮（最真实的商场高端博弈小说）  </a></li>
                <li>顾客评分：<img src="images/star_red.gif" alt="star"/><img src="images/star_red.gif" alt="star"/><img src="images/star_red.gif" alt="star"/><img src="images/star_red.gif" alt="star"/><img src="images/star_red.gif" alt="star"/></li>
                <li>作　者：<a href="#" class="blue_14">韦帕　 </a> 著</li>
                <li>出版社：<a href="#" class="blue_14">国际文化出版公司</a></li>
                <li>出版时间：2009年07月</li>
                <li>北京，六百公里处，有宝地，233亩，土地价值2.5亿，总投资额近八亿，利润近三亿。　　项目吸引了众多北京房地产商目光，其中最贪婪的一道目光，来自顾忱。但顾忱，总资产不过千万！想拿项目，无异于“空手套...</li>
                <li>
                    <dl class="product_content_dd">
                        <dd><img src="images/product_buy_02.gif" alt="shopping"/></dd>
                        <dd><img src="images/product_buy_01.gif" alt="shopping"/></dd>
                        <dd>节省：￥8.40</dd>
                        <dd>折扣：<span>74折</span></dd>
                        <dd class="footer_dull_red"><span>￥23.60</span></dd>
                        <dd class="product_content_delete"><span>￥32.00</span></dd>
                    </dl>
                </li>
            </ul>
        </div>
        <div class="product_storyList_content_bottom"></div>
        </div>
        <!--列表开始-->
        <div class="product_storyList_content_t">
        <div class="product_storyList_content_left"><img src="images/product_list_04.jpg" alt="图书列表"/></div>
        <div class="product_storyList_content_right">
            <ul>
                <li class="product_storyList_content_dash"><a href="#" class="blue_14">圈子圈套 迷局篇2：职场商战三部曲  </a></li>
                <li>顾客评分：<img src="images/star_red.gif" alt="star"/><img src="images/star_red.gif" alt="star"/><img src="images/star_red.gif" alt="star"/><img src="images/star_red.gif" alt="star"/><img src="images/star_red.gif" alt="star"/></li>
                <li>作　者：<a href="#" class="blue_14">王强 </a> 著</li>
                <li>出版社：<a href="#" class="blue_14">长江文艺出版社</a></li>
                <li>出版时间：2006年08月</li>
                <li>《圈子圈套2・迷局篇》是“圈子圈套三部曲”的第二部。 职场风云再起。洪钧出任维西尔中国区总经理，他和俞威之间的较量又或明或暗地展开来，面对内部的纷争和商场上的尔虞我诈，他该如何出招……俞威依...</li>
                <li>
                    <dl class="product_content_dd">
                        <dd><img src="images/product_buy_02.gif" alt="shopping"/></dd>
                        <dd><img src="images/product_buy_01.gif" alt="shopping"/></dd>
                        <dd>节省：￥11.40</dd>
                        <dd>折扣：<span>59折</span></dd>
                        <dd class="footer_dull_red"><span>￥16.60</span></dd>
                        <dd class="product_content_delete"><span>￥28.00</span></dd>
                    </dl>
　              </li>
            </ul>
        </div>
        <div class="product_storyList_content_bottom"></div>
        </div>
        <!--列表开始-->
        <div class="product_storyList_content_t">
        <div class="product_storyList_content_left"><img src="images/product_list_05.jpg" alt="图书列表"/></div>
        <div class="product_storyList_content_right">
            <ul>
                <li class="product_storyList_content_dash"><a href="#" class="blue_14">圈子圈套3.终局篇（附赠王强演讲光盘）  </a></li>
                <li>顾客评分：<img src="images/star_red.gif" alt="star"/><img src="images/star_red.gif" alt="star"/><img src="images/star_red.gif" alt="star"/><img src="images/star_red.gif" alt="star"/><img src="images/star_gray.gif" alt="star"/></li>
                <li>作　者：<a href="#" class="blue_14">王强 </a> 著</li>
                <li>出版社：<a href="#" class="blue_14">长江文艺出版社</a></li>
                <li>出版时间：2007年10月</li>
                <li>本书全景展示了商场和职场的生死厮杀、巅峰对决。主人公的命运、项目结局、所有的爱恨情仇都在本书中揭开谜底。 再次陷入低谷的洪钧在内忧外患中不甘消沉，在职场上和自己的上司明争暗斗，在商场上则和夙...</li>
                <li>
                    <dl class="product_content_dd">
                        <dd><img src="images/product_buy_02.gif" alt="shopping"/></dd>
                        <dd><img src="images/product_buy_01.gif" alt="shopping"/></dd>
                        <dd>节省：￥13.10</dd>
                        <dd>折扣：<span>59折</span></dd>
                        <dd class="footer_dull_red"><span>￥18.90</span></dd>
                        <dd class="product_content_delete"><span>￥32.00</span></dd>
                    </dl>
            　  </li>
            </ul>
        </div>
        <div class="product_storyList_content_bottom"></div>
        </div>