老师救我!!!应该时map有问题,不是很懂这些,虽然好像没有懂的-0-

来源：7-4 商品类别批量添加的前端开发

Gronbu1

2018-08-28

-----------------------------------------------------------------------------------------------------

然后这个页面是用了一个前端框架,

引入的JQ是<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

$('#new').click(function() {

var tempHtml = '<span class="grids-item temp"><div class="grids-txt"><span>#</span></div></span>'

+ '<span class="grids-item" style="padding:.31rem 0 .30rem 0;"><div class="grids-txt"><span><input style="height:19px;width:100%;text-align:center;"type="text" class="cell-input category"/></span></div></span>'

+ '<span class="grids-item" style="padding:.12rem 0 .15rem 0;"><div class="grids-txt"><span href="" class="btn btn-danger">删除</span></div></span>'

$('.m-grids-4').append(tempHtml);

YDUI.dialog.notify('请在新增空白处填写类别信息', 3000, function() {

console.log('');

});

写回答

1回答

翔仔

2018-08-29

同学好，应该是.temp取不到元素导致，需要调试一下，可以对比下我的源码，或者直接复制粘贴过去，清除缓存后试试，如果可以，再对比下你和这些正确源码的差异在哪里

productcategorymanagement.js

$(function() {
	var listUrl = '/o2o/shopadmin/getproductcategorylist';
	var addUrl = '/o2o/shopadmin/addproductcategorys';
	var deleteUrl = '/o2o/shopadmin/removeproductcategory';
	getList();
	function getList() {
		$
				.getJSON(
						listUrl,
						function(data) {
							if (data.success) {
								var dataList = data.data;
								$('.category-wrap').html('');
								var tempHtml = '';
								dataList
										.map(function(item, index) {
											tempHtml += ''
													+ '<div class="row row-product-category now">'
													+ '<div class="col-33 product-category-name">'
													+ item.productCategoryName
													+ '</div>'
													+ '<div class="col-33">'
													+ item.priority
													+ '</div>'
													+ '<div class="col-33"><a href="#" class="button delete" data-id="'
													+ item.productCategoryId
													+ '">删除</a></div>'
													+ '</div>';
										});
								$('.category-wrap').append(tempHtml);
							}
						});
	}
	$('#new')
			.click(
					function() {
						var tempHtml = '<div class="row row-product-category temp">'
								+ '<div class="col-33"><input class="category-input category" type="text" placeholder="分类名"></div>'
								+ '<div class="col-33"><input class="category-input priority" type="number" placeholder="优先级"></div>'
								+ '<div class="col-33"><a href="#" class="button delete">删除</a></div>'
								+ '</div>';
						$('.category-wrap').append(tempHtml);
					});
	$('#submit').click(function() {
		var tempArr = $('.temp');
		var productCategoryList = [];
		tempArr.map(function(index, item) {
			var tempObj = {};
			tempObj.productCategoryName = $(item).find('.category').val();
			tempObj.priority = $(item).find('.priority').val();
			if (tempObj.productCategoryName && tempObj.priority) {
				productCategoryList.push(tempObj);
			}
		});
		$.ajax({
			url : addUrl,
			type : 'POST',
			data : JSON.stringify(productCategoryList),
			contentType : 'application/json',
			success : function(data) {
				if (data.success) {
					$.toast('提交成功！');
					getList();
				} else {
					$.toast('提交失败！');
				}
			}
		});
	});

	$('.category-wrap').on('click', '.row-product-category.temp .delete',
			function(e) {
				console.log($(this).parent().parent());
				$(this).parent().parent().remove();

			});
	$('.category-wrap').on('click', '.row-product-category.now .delete',
			function(e) {
				var target = e.currentTarget;
				$.confirm('确定么?', function() {
					$.ajax({
						url : deleteUrl,
						type : 'POST',
						data : {
							productCategoryId : target.dataset.id
						},
						dataType : 'json',
						success : function(data) {
							if (data.success) {
								$.toast('删除成功！');
								getList();
							} else {
								$.toast('删除失败！');
							}
						}
					});
				});
			});
});

productcategorymanagement.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>商品分类管理</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet"
	href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
<link rel="stylesheet"
	href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
<link rel="stylesheet"
	href="../resources/css/shop/productcategorymanagement.css">
</head>
<body>
	<header class="bar bar-nav">
		<a class="button button-link button-nav pull-left back"
			href="javascript:history.back(-1)"> <span class="icon icon-left"></span> 返回
		</a>
		<h1 class="title">商品分类管理</h1>
	</header>
	<div class="content">
		<div class="content-block">
			<div class="row row-product-category">
				<div class="col-33">类别</div>
				<div class="col-33">优先级</div>
				<div class="col-33">操作</div>
			</div>
			<div class="category-wrap"></div>
		</div>
		<div class="content-block">
			<div class="row">
				<div class="col-50">
					<a href="#" class="button button-big button-fill button-success"
						id="new">新增</a>
				</div>
				<div class="col-50">
					<a href="#" class="button button-big button-fill" id="submit">提交</a>
				</div>
			</div>
		</div>
	</div>



	<script type='text/javascript'
		src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
	<script type='text/javascript'
		src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
	<script type='text/javascript'
		src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
	<script type='text/javascript'
		src='../resources/js/shop/productcategorymanagement.js'
		charset='utf-8'></script>
</body>
</html>

../resources/css/shop/productcategorymanagement.css

.row-product {
    border: 1px solid #999;
    padding: .5rem;
    border-bottom: none;
}
.row-product * {
    white-space: nowrap;
    overflow: scroll;
}
.row-product:last-child {
    border-bottom: 1px solid #999;
}
.product-name {
    white-space: nowrap;
    overflow-x: scroll;
}
.product-wrap a {
    margin-right: 1rem;
}

Gronbu1

翔仔

谢谢老师,问题解决了,真心感谢

2018-08-30

共3条回复

Java双版本（SSM到SpringBoot）校园商铺全栈开发

SSM商铺V1.0，解决毕设痛点；SpringBoot商铺V2.0，满足工作刚需

5134 学习 · 8152 问题

查看课程

相似问题

商店有三级类别或者很多吗？还有商品应该也有类别啊

回答 2