老师，这样的写法是不是太低效率了？
来源：3-4 作业题
非凡哥大战哥斯拉
2019-01-30 09:47:00
var searchItem = $('.header-search');
var searchInput = $('.header-search-input');
var list = $('.list')
list.css(
{
'position': 'absolute',
'top': 35
}
)
searchInput.keyup(function (e) {
var searchText = searchInput.val();
if (searchText) {
if (searchText == '鞋') {
getAjax.shoes()
getAjax.searchEnter(e)
} else if (searchText == '音速3') {
getAjax.single_item()
getAjax.searchEnter(e)
}
} else {
operateEle.hideLi()
}
})
searchInput.blur(function () {
operateEle.hideLi()
})
var getAjax = {
shoes: function () {
$.ajax({
url: '../homework/search.json',
type: 'GET',
dataType: 'json',
success: function (data) {
var data = data[0][0];
var reback = data.Results[0].Suggests;
var len = reback.length;
operateEle.hideLi()
operateEle.createLi(reback, len)
}
})
},
single_item: function () {
$.ajax({
url: '../homework/search.json',
type: 'GET',
dataType: 'json',
success: function (data) {
var data = data[1][0];
var reback = data.Results[0].Suggests;
var len = reback.length;
operateEle.hideLi()
operateEle.createLi(reback, len)
}
})
},
searchEnter: function (e) {
var searchText = searchInput.val();
if (e.keyCode == 13) {
if (searchText == '鞋') {
this.shoes_dispaly()
}
else if (searchText == '音速3') {
this.single_dispaly()
}
}
},
shoes_dispaly: function () {
$.ajax({
url: '../homework/basketballShoes.json',
type: 'GET',
dataType: 'json',
success: function (data) {
var data = data[0][0];
var reback = data.Results[0].Suggests;
var len = reback.length;
operateEle.createDiv(reback)
}
})
},
single_dispaly: function () {
$.ajax({
url: '../homework/basketballShoes.json',
type: 'GET',
dataType: 'json',
success: function (data) {
var data = data[1][0];
var reback = data.Results[0].Suggests;
var len = reback.length;
operateEle.createDiv(reback)
}
})
}
}
var operateEle = {
createLi: function (arr, len) {
var ul = document.createElement('ul');
ul.id = 'suggest'
var fragment = document.createDocumentFragment();
ul.style.width = '99.5%';
ul.style.listStyle = 'none';
for (var i = 0; i < len; i++) {
var li = document.createElement('li');
li.setAttribute('style', 'height:30px;line-height:30px')
var suggestion = arr[i]
li.innerHTML = suggestion['Txt'];
li.onmouseover = function () {
this.style.background = 'gray'
}
li.onmouseout = function () {
this.style.background = 'white'
}
fragment.appendChild(li)
}
ul.appendChild(fragment);
list.append(ul)
list.show()
},
hideLi: function () {
if (list.html()) {
list.html('')
list.hide()
} else {
list.hide()
}
},
imgSrcGet: function (str) {
var src = str.slice(13);
var img = src.replace(".png", "")
return img
},
createDiv: function (arr) {
var len = arr.length
console.log(len)
this.clearDiv();
var div = $('.commodityContainer')
for (var i = 0; i < len; i++) {
var suggestion = arr[i]
var Txt = suggestion['Txt'];
var num = suggestion['num'];
var max = suggestion['max'];
var discount = suggestion['discount'];
var label = suggestion['label'];
var shop = suggestion['shop'];
var imageSrc = suggestion['image'];
var image = this.imgSrcGet(imageSrc)
var color = suggestion['color'];
var size = suggestion['size'];
var nonDiscount = suggestion['nonDiscount'];
var box = document.createElement("div");
box.className = "mainCommodity"
var str = '<div class="shopInfo">'
+ '<div class="shopMsg">'
+ '<input type="checkbox" name="shopMsg" id="shopMsg" class="shopMsg-input" autocomplete="off">'
+ '<label for="shopMsg">店铺：'
+ '<a href="#">' + shop + '</a>'
+ '</div>'
+ '</div>'
+ '<div class="commodityInfo">'
+ '<ul>'
+ "<li class='td-chk'>"
+ '<div class="td-inner">'
+ '<input type="checkbox" name="checkbox" autocomplete="off" >'
+ '</div>'
+ '</li>'
+ '<li class="td-item">'
+ '<div class="td-inner">'
+ '<a href="#" class="' + image + '">'
+ '</a>'
+ '<div class="item-info">'
+ '<div class="item-basis-info">'
+ '<a href="#">' + Txt + '</a>'
+ '</div>'
+ '<div class="item-other-info">'
+ '<div class="item-other-space"></div>'
+ '<div class="item-other-list">'
+ '<a href="#" title="支持信用卡支付">'
+ '<div class="bandCard"></div>'
+ '</a>'
+ '<a href="#" class="sevenDay" title="7天无理由">'
+ '<div class="sevenDay"></div>'
+ '</a>'
+ '<a href="#" title="消费者保障服务">'
+ '<div class="guarantee"></div>'
+ '</a>'
+ '</div>'
+ '</div>'
+ '</div>'
+ '</div>'
+ '</li>'
+ '<li class="td-info">'
+ '<div class="td-info-msg">'
+ '<p>' + color + '</p>'
+ '<p>' + size + '</p>'
+ '</div>'
+ '</li>'
+ '<li class="td-price">'
+ '<div class="td-inner">'
+ '<p class="non-discount">' + nonDiscount + '</p>'
+ '<p class="discount">￥+<span>' + num + '</span>' + '</p>'
+ '<div class="promotion">卖家促销'
+ '<i class="promotionIcon"></i>'
+ '</div>'
+ '<div class="proSlidedown">'
+ '<p class="newPro">卖家促销：新品大特价' + '</p>'
+ '<p>优惠：￥' + num + '</p>'
+ '</div>'
+ '</div>'
+ '</li>'
+ '<li class="td-amount">'
+ '<div class="item-amount">'
+ '<a href="#" class="amount-left amount-color">-</a>'
+ '<input type="text" name="amountNum" value="1" autocomplete="off">'
+ '<a href="#" class="amount-right">+</a>'
+ '</div>'
+ '<div class="stock">'
+ '574'
+ '</div>'
+ '<div class="outNum">'
+ '<span class="instr">最多只能购买</span>'
+ '<span class="stockNum"></span>+<em>件</em>'
+ '</div>'
+ '</li>'
+ '<li class="td-sum">'
+ '<em>￥</em><span>' + num + '</span>'
+ '</li>'
+ '<li class="td-operation">'
+ '<p>' + '<a href="#" class="delete">删除</a>' + '</p>'
+ '</li>'
+ '</ul>'
+ '</div>'
box.innerHTML = str
div.append(box)
}
},
clearDiv: function () {
$('.commodityContainer').html('')
}
}有没有什么办法，能像后端渲染那样用模板语言去替换每一条商品信息啊，以前用python的时候用个jinjia模板直接在html页面上{% for xx in xx %}{% endfor %}就完事了，感觉前端来渲染怎么好像反而更麻烦了。还是说我的方法比较笨，其实还有更高效率的办法？老师能提供另一个思路吗
写回答
1回答
-
你好，上传的代码测试是没有问题的。
素材中提供了template.js引擎模板：
在页面中也提供的布局：
同学可以使用这个模板来完成，可以参考下面的代码：
var searchItem = $('.header-search'); var searchInput = $('.header-search-input'); searchInput.keyup(function(e) { var searchText = searchInput.val(); $.get('json/search.json', { 'Query': searchText }, function(data) { for (var i = 0; i < data.length; i++) { //如果值与json中的query字段匹配，动态加载html if (searchText === data[i][0].Query) { var results = data[i][0].Results[0]; //js模板引擎 var $html = template('search', results); //下列列表dispaly:none的，当符合条件后 //调用show()函数，然后设定css样式 $('.list').html($html).show().css({ 'position': 'absolute', 'left': 0, 'top': $('.header-search-input').height() + 5 }) } } }); //如果值为空，则隐藏整个列表 if ($(this).val() === '') { $('.list').hide(); } //按下回车时，调用shoppingCart()函数。 if (e.which === 13) { shoppingCart(); } }) //搜索下拉列表隐藏 $(document).on('click', function(event) { $('.list').hide(); }); //购物车存放产品--- 通用function function shoppingCart() { //获取输入框的值，用于字符串匹配 var $val = $('.header-search-input').val(); $.get('json/basketballShoes.json', { 'Query': $val }, function(data) { for (var i = 0; i < data.length; i++) { if ($val === data[i][0].Query) { //字符串匹配 //当输入'鞋'时，会匹配第一个数组 //当输入'音速3'时，会匹配第二个数组。 //也可以自行修改字符串匹配规则。 var $data = data[i][0].Results[0].Suggests; var results = data[i][0].Results[0]; /*使用js模板引擎，结构与数据分离*/ var $html = template('basketBallShoes', results); $('.commodityContainer').html($html); } } }); }里面json文件的路径需要按照自己的引入路径测试。
同学可以测试下这段代码，祝学习愉快！
0
相似问题