网上书城首页之书籍分类列表

本章目标、实现首页书籍分类列表

用代码实现动态的书籍分类（使用forEach实现），如下图：

一、开始编写代码

1、主界面index.jsp

我们先把主界面的这一串分类列表注释

<!--<li class="list-group-item">现代言情</li>
						<li class="list-group-item">古代言情</li>
						<li class="list-group-item">幻想仙侠</li>
						<li class="list-group-item">玄幻</li>
						<li class="list-group-item">都市</li>
						<li class="list-group-item">奇幻</li>
						<li class="list-group-item">军事</li>
						<li class="list-group-item">科幻</li>
						<li class="list-group-item">武侠</li>
						<li class="list-group-item">青春</li>
						<li class="list-group-item">竞技</li>
						<li class="list-group-item">历史</li>
						<li class="list-group-item">游戏</li>
						<li class="list-group-item">其他</li> -->

2、单独写一个事件，和后台事件分开

以免冲突，不然效果不出来

index.js代码

$(function(){
	var ctx=$("#ctx").val();
//	当浏览器访问http://localhost:8080/EasyUI_mvc/index.jsp时，ajax要加载书籍类表的数据
	$.ajax({
		url:ctx+'/category.action?methodName=combobox',
		success:function(data){
			data=eval('('+data+')');
//			<li class="list-group-item">现代言情</li>
			for(i in data){
				$(".list-group").append('<li class="list-group-item">'+data[i].name+'</li>');
			}
		}
	});

})

3、然后在界面后面引用js

现在的效果

4、样式不出来的原因

主界面中这两串是加载index.jsp之后做的样式，此时li标签不存在，所以样式不出来，我们应该把它们放在js中，这样就出来了。

$(".c-category li").eq(0).addClass('bg-color1');
$(".c-category li:gt(0)").addClass('bg-color2');

5、添加点击事件

现在的列表样式是出来了，但是还有个点击事件，鼠标放上去会变色

解决方法
将这个点击事件代码也放进js中

$(".c-category li:gt(0)").hover(function() {
					$(this).addClass('bg-opacity');
				}, function() {
					$(this).removeClass('bg-opacity');
				});

最终效果

index.js全代码

$(function(){
	var ctx=$("#ctx").val();
//	当浏览器访问http://localhost:8080/EasyUI_mvc/index.jsp时，ajax要加载书籍类表的数据
	$.ajax({
		url:ctx+'/category.action?methodName=combobox',
		success:function(data){
			data=eval('('+data+')');
//			<li class="list-group-item">现代言情</li>
			for(i in data){
				$(".list-group").append('<li class="list-group-item">'+data[i].name+'</li>');
				$(".c-category li").eq(0).addClass('bg-color1');
				$(".c-category li:gt(0)").addClass('bg-color2');
				$(".c-category li:gt(0)").hover(function() {
					$(this).addClass('bg-opacity');
				}, function() {
					$(this).removeClass('bg-opacity');
				});
			}
		}
	});
})

下章更新新书上架、热销书籍！