我的大概思路是这样的,第一后果获取所有的商品分类 保存在list集合里面,第二从后台获取所有的商品 第三在JSP页面遍历商品分类集合放在页面的左边,然后jsp页面商品详细信息这块,也得先遍历商品分类,然后里面嵌套遍历商品详细信集合

并且带条件<c:if> 判断语句 条件为,分类对象的ID 要等于商品对象里面的分类ID 大概是这样,看下面JSP代码明白了

1:jsp 页面如下图

 <div class="secti-con">
<!-- 菜品分类 -->
<div class="secti-conl" >
<ul class="secti-conla">
<c:forEach items="${classificationList }" var="classification">
<li style="border-top:0;" data-id="${classification.id }">${classification.className }</li>
</c:forEach>
</ul>
</div>
<!-- 菜品详细 -->
<div class="secti-conr" >
<c:forEach items="${classificationList }" var="classification">
<ul id="${classification.id }" style="display: none;">
<s:iterator value="list" var="dishes" status="st">
<c:if test="${classification.id eq dishes.classification.id }">
<li>
<div class="sect-box">
<div class="sect-img">
<%-- <a href="javascript:goToDetail(${dishes.id})"><img src="<%=basePath %>${dishes.imageUrl}"></a> --%>
<img src="<%=basePath %>${dishes.imageUrl}" onerror="javascript:this.src='<%=basePath %>res/funcanteen/images/Place-order-3.0/noimg.png';"/>
</div>
<div class="sect-name">
<div class="sect-name1">
<%-- <a href="javascript:goToDetail(${dishes.id})">
<span >${dishes.name }</span>
</a> --%>
<span >${dishes.name }</span>
</div>
<div class="sect-name2">已售出 <span id="dishes_${dishes.id }" class="salesShow">加载中</span></div>
<div class="sect-name3">¥<span class="priceded">${dishes.price }</span></div>
<div class="caidan_jg_y">${p.oldPrice != null ? '¥' : ''}${p.oldPrice }</div>
</div>
<div class="sect-add">
<div class="sect-adda">
<div class="sect-added">
<button type="button" class="dellNum delled" id="dellNum_${dishes.id }">-</button>
<input name="dell_dishesId" type="hidden" value="${dishes.id}" id="dell_dishesId"/>
<input id="numberinst_${dishes.id }" class="numberinst" readonly="" value="0" type="text" name="number" maxlength="2">
<button type="button" class="addedNum addedl">+</button>
<input name="dishesId" class="dishesIdInput" type="hidden" value="${dishes.id }"/>
</div>
</div>
</div>
</div>
</li>
</c:if>
</s:iterator>
</ul>
</c:forEach>
</div>
</div>

2:页面加载时候默认给选中第一个分类

js代码如下页面第一次加载时候js控制选中一个商品分类

$(document).ready(function(){
var conla = $(".secti-conla li:first-child");
conla.addClass("sectidea");
var conlaId = conla.data("id");
$("#"+conlaId).show();
});

3:js控制点击商品分类时候显示商品详细信息

//点击菜品分类名称
$(".secti-conla li").click(function(e) {
$(this).addClass("sectidea").siblings().removeClass("sectidea");
var conlaId = $(this).data("id");
$("#"+conlaId).show().siblings().hide();
});

具体后台数据怎么封装的,这个根据个人需求决定了,这里就不说了。

jsp页面展示更加商品的分类,控制商品的显示的更多相关文章

  1. jsp页面往mysql里插入中文后数据库里显示乱码

    1.JSP页面乱码 这种乱码的原因是应为没有在页面里指定使用的字符集编码,解决方法:只要在页面开始地方用下面代码指定字符集编码即可,<%@ page contentType="text ...

  2. springmvc 返回json数据给前台jsp页面展示

    spring mvc返回json字符串的方式 方案一:使用@ResponseBody 注解返回响应体 直接将返回值序列化json            优点:不需要自己再处理 步骤一:在spring- ...

  3. JSP页面数据展示:分组数据展示

    一.描述: 页面上要展示的数据只要写好sql从数据库查出来即可,但是展示有时候不是太好处理.比如工作中遇到的这种情况:有一个问题处理的流程,其中需要选择下一处理人,这些处理人要以部门的形式分组展示,实 ...

  4. 关于html5与jsp页面同样的html代码展示的页面效果不一样的问题

    原文:关于html5与jsp页面同样的html代码展示的页面效果不一样的问题 html5默认的声明为 <!DOCTYPE html> jsp默认的声明头部为 <%@ page con ...

  5. 通用分页jsp页面显示

    注:本章内容都是在上一篇文章 通用分页后台显示:https://www.cnblogs.com/ly-0919/p/11058942.html  的基础上进行改进,所以有许多的类都在上一篇, 带来不便 ...

  6. 【SpringBoot】转载 springboot使用thymeleaf完成数据的页面展示

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/weixin_36380516/artic ...

  7. app——分享wap站,数据处理页面展示

    无意中接到了一个小的工作任务:配合手机app端的分享功能做一个wap站,简言之:将手机app端分享的文章id传过来,利用此id再进行一系列的操作,由于文章分为纯文本,图文以及图集的三种类型的文章,因此 ...

  8. Saiku控制页面展示的数据过长自动换行(二十四)

    Saiku控制页面展示的数据过长自动换行 目前用到saiku来展示数据,发现数据文本过长也不会自动换行,然而用户那边又需要换行(会好看些),所以就来改一改源码啦 首先我们使用谷歌浏览器 inspect ...

  9. Jsp页面跳转和js控制页面跳转的几种方法

    Jsp 页面跳转的几种方法 1. RequestDispatcher.forward() 在服务器端起作用,当使用forward()时,Servlet engine传递HTTP请求从当前的Servle ...

随机推荐

  1. 题解 P1283 【平板涂色】

    P1283 平板涂色 数据范围也太小了qwq..适合本萌新暴搜 小小的剪枝: 1.用pre预处理出每块矩形上方的矩形,pre[i][0]记录数目(如果数据范围再开大一点,直接1~n枚举判断可能超时qw ...

  2. Centos610-FastDFS系列篇

    最近有使用到FastDFS,考虑到实际在Linux上面配置频率比较低(属于一次性配置),所以本文开始记录相关安装过程,以方便后续使用. 1.单机版安装配置 FastDFS单机模式安装配置 2.集群模式 ...

  3. Django Web接口开发

    什么是接口 接口一般来讲分为两种: (1)程序内部的接口:方法与方法.模块与模块之间的交互,程序内部抛出的接口,如登录发帖,发帖就必须要登录,如果不登录不能发帖,发帖和登录这两个模块之间就要有交互,就 ...

  4. GO学习之 从hello.go开始

    一.GO运行的两种方式 1.如果是对源码编译后,再执行 如:hello.go文件 hello.go文件(源文件)----go build hello.go[编译文件]--->变成可执行文件(.e ...

  5. 改变input[type=range]的样式 动态滑动

    <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8 ...

  6. IDEA中使用maven下载插件速度很慢解决方法

    1.打开IDEA的File--->settings--->搜索mavaen--->找到settings.xml 2.在settings.xml中添加 <!-- 阿里云仓库 -- ...

  7. 本机修改虚拟机linux中的代码文件

    最近在研究swoole这个框架,好不容易装了一个swoole,为了开发方面,需要早宿主机和虚拟机之间文件共享,一开始使用vmware tool可以实现共享,但是只能在linux中看到win共享的文件, ...

  8. 2016 Google code jam 大赛

    二,RoundC import java.io.BufferedReader; import java.io.FileInputStream; import java.io.FileNotFoundE ...

  9. 提高Scrapy爬取效率

    1.增加并发: 默认scrapy开启的并发线程为32个,可以适当进行增加.在settings配置文件中修改CONCURRENT_REQUESTS = 100值为100,并发设置成了为100. 2.降低 ...

  10. 【C语言】输入圆的半径,求解圆的周长和面积

    公式: C=2πr S=πr² 代码: #include<stdio.h> int main() { float r,PI; PI = 3.14159; printf("请输入圆 ...