老师,我的问题是订单详情页。
来源: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方法获取的是一个元素,如果得到的结果是一个集合的话,可以用这个方法获取第一个元素。例如:


课程中通过parents方法找到指定的父元素,只有一个,加不加first方法都是可以的,视具体情况而定。
自己可以再理解下,祝学习愉快!
相似问题