老师,我的问题是订单详情页。

来源:3-2 项目作业

慕斯0469344

2019-09-27 20:32:53

(function(){

    // 右侧类目item模版字符串
    var itemTmpl = '<div class="menu-item">'+
                        '<img class="img" src=$picture />'+
                        '<div class="menu-item-right">'+
                           '<p class="item-title">$name</p>'+
                           '<p class="item-desc">$description</p>'+
                           '<p class="item-zan">$praise_content</p>'+
                           '<p class="item-price">¥$min_price<span class="unit">/$unit</span></p>'+
                        '</div>'+
                        '<div class="select-content">'+
                            '<div class="minus"></div>'+
                            '<div class="count">$chooseCount</div>'+
                            '<div class="plus"></div>'+
                        '</div>'+
                    '</div>';




    /**
     * 渲染列表
     * param array
     */
    function initRightList(list){

        $('.right-list-inner').html('');
        list.forEach(function(item, index){

            if (!item.chooseCount) {
                item.chooseCount = 0;
            }
            var str = itemTmpl.
                      replace('$picture', item.picture).
                      replace('$name', item.name).
                      replace('$description', item.description).
                      replace('$praise_content', item.praise_content).
                      replace('$min_price', item.min_price).
                      replace('$unit', item.unit).
                      replace('$chooseCount', item.chooseCount);

            var $target = $(str);

            $target.data('itemData',item);

            $('.right-list-inner').append($target);



        })
    }


    /**
     * 渲染右侧title
     * param string
     */
    function initRightTitle(str){
        $('.right-title').text(str);
    }


    function addClick(){
        $('.menu-item').on('click', '.plus', function(e){
            var $count = $(e.currentTarget).parent().find('.count');

            $count.text(parseInt($count.text()||'0')+1);

            var $item = $(e.currentTarget).parents('.menu-item').first();

            var itemData = $item.data('itemData');

            itemData.chooseCount = itemData.chooseCount + 1;


            window.ShopBar.renderItems();

        });
        $('.menu-item').on('click', '.minus', function(e){
            var $count = $(e.currentTarget).parent().find('.count');

            if ($count.text() == 0) return;

            $count.text(parseInt($count.text()||'0')-1);


            var $item = $(e.currentTarget).parents('.menu-item').first();

            var itemData = $item.data('itemData');

            itemData.chooseCount = itemData.chooseCount - 1;


            window.ShopBar.renderItems();

        });
    }


    function init(data){
        initRightList(data.spus || []);
        initRightTitle(data.name);
        addClick();
    }


    window.Right = {
        refresh: init
    }


})();

老师,我的问题如下。1:var $count = $(e.currentTarget).parent().find('.count');为什么这句代码用.parent去找到.count?plus和count不是兄弟元素吗?2:var $item = $(e.currentTarget).parents('.menu-item').first();这里为什么用first呢?first获取的是第几个元素呢?

写回答

1回答

好帮手慕星星

2019-09-28

同学你好。

1、plus和count是兄弟元素,但是这里是先通过plus去找父级select-content,然后再通过find方法找到子元素count,所以是没有问题的。

2、first方法获取的是一个元素,如果得到的结果是一个集合的话,可以用这个方法获取第一个元素。例如:

http://img.mukewang.com/climg/5d8ebf5109d216a304100202.jpg

http://img.mukewang.com/climg/5d8ebf630947ec0d09650379.jpg

课程中通过parents方法找到指定的父元素,只有一个,加不加first方法都是可以的,视具体情况而定。

自己可以再理解下,祝学习愉快!

0

0 学习 · 6815 问题

查看课程