jquery 换一批 数据是用freemarker查询的 一共查询出来九条数据

1.首先是xhtml页面怎么写的  我页面用的是freemarker 

<#if listRoute??>
          <#list listRoute as item>
	          <li id="recommend_${item_index+1}">
		          <dl>
		            <dd>
		               <a href="${base}/tours/${item.id?c}.html" target="_blank">
		                 <#if item.pictures??> 
		                    <img id="recommend_img_${item_index+1}" src="${g_url!}uploadPics/trip/${item.pictures!}" width="318" height="200"/>
		                 <#else>
		                    <img id="recommend_img_${item_index+1}" src="images/trip/nopic.jpg" width="318" height="200"/>
		                 </#if>
		               </a>
		            </dd>
		          </dl>
	        </li>
          </#list>
       </#if>

 <a class="refresh" οnclick="exchangeNumber()">换一批</a>

2.js页面

//因为我是一次性把换一批的数据全部查询出来，所以需要把li为123的数据显示 然后li为456789的隐藏

$(function(){
	var lengthYC=$("li:[id^='recommend_']").length;
	for(var i=1;i<=lengthYC;i++){
		if(i<=3){
			$("#recommend_"+i).attr("style","display:block");
		}else{
			$("#recommend_"+i).attr("style","display:none");
		}
		$("#recommend_img_"+i).attr("src",$("#recommend_img_"+i).attr("original"));
	}
})

这是第一次写的。因为不太会，这样子也可以实现效果。但是这个代码太死，维护性不高

if($("#recommend_1").css("display")=="block"){
		$("#recommend_1").hide();
		$("#recommend_2").hide();
		$("#recommend_3").hide();
		$("#recommend_4").show();
		$("#recommend_5").show();
		$("#recommend_6").show();
		$("#recommend_7").hide();
		$("#recommend_8").hide();
		$("#recommend_9").hide();
	}else if($("#recommend_4").css("display")=="block"){
		$("#recommend_1").hide();
		$("#recommend_2").hide();
		$("#recommend_3").hide();
		$("#recommend_4").hide();
		$("#recommend_5").hide();
		$("#recommend_6").hide();
		$("#recommend_7").show();
		$("#recommend_8").show();
		$("#recommend_9").show();
	}else if($("#recommend_7").css("display")=="block"){
		$("#recommend_1").show();
		$("#recommend_2").show();
		$("#recommend_3").show();
		$("#recommend_4").hide();
		$("#recommend_5").hide();
		$("#recommend_6").hide();
		$("#recommend_7").hide();
		$("#recommend_8").hide();
		$("#recommend_9").hide();
	}

所以需要在进行修改，那要怎么改呢？

//换一批事件
function exchangeNumber(){
	//把换一批的li的数据长度找到 
	var yincang=$("li:[id^='recommend_']").length;
	//这里是定义当前显示的ID值最大
	var j;
	for(var i=1;i<=yincang;i++){
		if(!($("li:[id='recommend_"+i+"']").is(":hidden"))){
			j=i;
		}
	}
	//这个循环完成的是隐藏显示
	for(var i=1;i<=yincang;i++){
		//如果为9，换成0
		if(j==9){
			j=0;
		}
		if(i==j+1||i==j+2||i==j+3){
			$("#recommend_"+i+"").show();
		}else{
			$("#recommend_"+i+"").hide();
		}
	}
}

欧耶。完成。

之前想了好久都没有想到要怎么做。终于好了。