我醉了!!!花时间买教训

最新推荐文章于 2023-12-19 13:57:07 发布

代码使谁头秃

最新推荐文章于 2023-12-19 13:57:07 发布

阅读量169

点赞数

本文链接：https://blog.csdn.net/qq_42024238/article/details/105039273

版权

遇到问题

本人是小白中的小白，准备在jsp中遍历后端传来的list，结果在<ui>和<li>中加入<c:forEach>后前端的样式就坏了。源代码如下

<ul id="fh5co-gallery-list">
	<c:forEach items="${suitsList}" var="suitsMap">
		<li class="one-third animate-box col-md-4 col-sm-6"
			data-animate-effect="fadeIn"
			style="background-image: url(${suitsMap.suit.spath});"><a
			href="images/gallery-1.jpg">
				<div class="case-studies-summary">
					<span>匹配度 : ${suitsMap.score}</span>
					<h2>${suitsMap.suit.sname}</h2>
				</div>
		</a></li>
	</c:forEach>
</ul>

尝试解决

我把的页面复制到HBuilder里去找原因，更方便一些。
一开始觉得肯定是有css的选择条件是ul > li，一找发现并没有。
发现foreach放在ul外面样式正常，于是想连着ul一起循环了，再在外面加一层ul(现在想想挺扯淡的)，成功循环! 但是每个ul都占了一行(本来是一行显示3个 li )。
于是我花了很久找 ul 的样式，希望把样式改成可以显示在一行，失败了。
然后我在随便尝试中在foreach外面加了一层ul发现，样式又坏了。。只要foreach在 ul 和 li 之间就不行。此时已经过去了2个多小时
吃了个晚饭回来，改变思路，准备用jQuery把 li 代码块append到 ul 里面，但是奈何本人是小白中的小白，jQuery用的十分不熟练，又整了2个多小时才勉强实现添加代码块的功能。代码如下(数据是先随便写了一个和我后端数据结构一样的列表)

<script type="text/javascript">
	$(function() {
		var list = [
			{score: 20,
			suit: {"name":"name啊"},}
			,
			{score: 20,
			suit: {"name":"name啊"},}
		];
		alert(suitsList);
		$.each(list, function(n,values) {
			$(values).each(function() {
				var htmladd = "";
				htmladd +=
					"<li class='one-third animate-box col-md-4 col-sm-6 fadeIn animated-fast' data-animate-effect='fadeIn' style='background-image: url("
				htmladd +=this.suit.spath;
				htmladd +="); '>";
				htmladd += "<a href='detail.jsp?sid="
				htmladd += this.suit.sid;
				htmladd +="'>";
				htmladd += " <div class='case-studies-summary'>";
				htmladd += " <span>"
				htmladd += this.score;
				htmladd += "</span>";
				htmladd += " <h2>"
				htmladd += this.suit.name;
				htmladd += "</h2>";
				htmladd += " </div>";
				htmladd += " </a>";
				htmladd += " </li>";
				$("#fh5co-gallery-list").append(htmladd);
			});
		});
	});
</script>

jQuery实现添加 li 的过程其实很曲折，当成功显示的一瞬间，别提有多高兴，接下来只用拿到后端传来的数据就行了。网上查了一下，很多都说用ajax，我想了一下我的这个情况好像不太适合用ajax，更何况我还不会。。
我上网找了很多方法，比如把数据放到hidden标签里面，再用jq取出来、在js中用el表达式取var suitsList='${suitsList}'，取出来都是String类型，遍历不了。
还有一个方法是用JSON来传数据，但是说实话JSON还没怎么用过，得现学，这时候已经临近12点了，现学还不知道什么时候能整好。
准备先睡觉吧，头发要紧，明天起床再继续。一想到就为了这个破样式，浪费了一下午加一晚上都没搞好，气得要命。
就纳闷下午找样式找了那么久为啥找不到，很不科学。回到eclipse里面，随手 ctrl+alt+up 把foreach移到 ul 外面，发现样式竟然好了，而且list也都遍历出来了。。。。

问题原因

其实我也不知道为什么原来坏着的突然就好了。一切在我的认知范围内，都非常的不科学，先是莫名其妙的CSS坏了(现在回想可能是因为偷懒，重新编辑了jsp没有重启项目，就简单刷新了下页面)，我当时也没细想原因，直接去找解决方法了，换到HBuilder里面也在 ul 和 li 中间加了foreach标签，显示依旧异常(可能是ul和li中间不能有其他标签)。最后在eclipse中又好了应该是因为foreach被解析成循环，不在页面中作为标签存在了，所以页面正常了。

这么一分析的话，我认为应该是因为我最早偷懒，在修改了jsp(添加了foreach标签)页面后没有重启项目，jsp没有重新编译的，导致foreach标签没有正确解析成循环语句导致的最初样式的丢失。