dom问题

首页课程实战体系课手记专栏慕课教程

dom问题

来源：3-2 项目作业

前端小白白白白白白

2021-01-25 11:26:07

http://class.imooc.com/course/qadetail/275058

我是刚刚这里的同学,我的问题就是在category下

相关代码：category.js 这个是左边类目的

(function(){
	var itemTmpl='<div class="category-item">$getCategoryContent</div>'




	function addEvent(){
		$('.category').on('click','.category-item',function(){
			$(this).addClass('active').siblings().removeClass('active')
			choose($(this).data('itemData'))
		})
		// 这个位置也获取不到.category-item
	}
	function getCategoryContent(list){
		if(list.icon.length!=0){
			return '<img src='+list.icon+' /><span>'+list.name+'</span>'
		}else{
			return '<span>'+list.name+'</span>'
		}
	}
	function initCategoryList(list){
		list.forEach(function(item){
			var str=itemTmpl
			.replace('$getCategoryContent',getCategoryContent(item))
			var $str=$(str)
			$str.data('itemData',item)
			$('.category').append($str)
		})
		// $('.category-item').first().click() //在这里能访问到.category-item ,，但是在其他位置获取不到菜单项
	}
	function getList(){

		$.get('../json/food.json',function(data){
			var list=data.data.food_spu_tags
			initCategoryList(list)
		})
	}
	function init(){
		getList()
		addEvent()
		$('.category-item').first().click() //这里访问不到.category-item ,明明已经初始化了
	}
	init()
})()

相关代码：choose.js 这个是右边点单的

(function() {
	var itemTmpl =
		'<div class="choose-item">' +
		'<img src=$picture class="choose-img" />' +
		'<div class="choose-right">' +
		'<h4 class="choose-title">$name</h4>' +
		'<p class="choose-description">$description</p>' +
		'<p class="choose-zan">$praise_content</p>' +
		'<p class="choose-price"><span class="price">￥$min_price</span>/例</p>' +
		'<div class="choose-changeCount">' +
		'<div class="minus"></div>' +
		'<div class="count">$count</div>' +
		'<div class="plus"></div>' +
		'</div>' +
		'</div>' +
		'</div>'


	function addEvent() {
		console.log("初始化点击")
		$('.plus').on('click', function() {
			var item = $(this).parents('.choose-item') //点击所在项
			var data = item.data('itemData') //数据
			var count = item.find('.count') //数字
			count.text(parseInt(count.text()) + 1) //显示数据增加
			data.count++
		})
		$('.minus').on('click', function() {
			var item = $(this).parents('.choose-item') //点击所在项
			var data = item.data('itemData') //数据
			var count = item.find('.count') //数字
			if (data.count == 0) return
			count.text(parseInt(count.text()) - 1) //显示数据减少
			data.count--
		})
	}

	function initTitle(list) {
		// 渲染标题
		$('.choose .title').text(list.name)
	}

	function initContentList(list) {
		// 渲染列表
		$('.choose-inner').html("")
		var data = list.spus
		data.forEach(function(item) {
			item.count = item.count || 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('$count', item.count)

			$str = $(str)
			$str.data('itemData', item)
			$('.choose-inner').append($str)
		})
	}

	function init(list) {
		// 初始化
		initContentList(list)
		initTitle(list)
		addEvent()
	}
	window.choose = function(list) {
		// 传递进的是被点击的类目上挂载的数据
		init(list)
	}
})()

相关代码： menu.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>老八蜜汁小憨包餐厅</title>
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0" />
		<script type="text/javascript">
			(function() {
				var docEl = document.documentElement

				function setRemUnit() {
					var rem = docEl.clientWidth / 10
					docEl.style.fontSize = rem + 'px'
				}
				setRemUnit()
				window.addEventListener('resize', setRemUnit)
			})()
		</script>
		<link rel="stylesheet" href="../lib/reset.css">
		<link rel="stylesheet" href="../common/navHeader/navHeader.css">
		<link rel="stylesheet" href="../common/headerTab/headerTab.css">
		<link rel="stylesheet" href="category/category.css">
		<link rel="stylesheet" href="choose/choose.css">
		<link rel="stylesheet" href="shopBar/shopBar.css">
	</head>
	<body>
		<!-- 头部开始 -->
		<header>
			<div class="header-icon"></div>
			<h4 class="header-title">老八蜜汁小憨包餐厅</h4>
		</header>
		<!-- 头部结束 -->
		<!-- 页内导航开始 -->
		<div class="header-tab"></div>
		<!-- 页内导航结束 -->
		<!-- 点餐区域开始 -->
		<div class="main">
			<div class="category"></div>
			<div class="choose">
				<h4 class="title"></h4>
				<div class="choose-inner">
				</div>
			</div>
		</div>
		<!-- 点餐区域结束 -->
		<!-- 购物车区域开始 -->
		<div class="shopbar">

		</div>
		<!-- 购物车区域结束 -->
		<script src="../lib/jQuery.js" type="text/javascript" charset="utf-8"></script>
		<script src="../common/headerTab/headerTab.js" type="text/javascript" charset="utf-8"></script>
		<script src="category/category.js" type="text/javascript" charset="utf-8"></script>
		<script src="choose/choose.js" type="text/javascript" charset="utf-8"></script>
		<script src="shopBar/shopBar.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>