关于循环利用JS的问题

各位大侠，最近小弟遇到一个很特别的问题，就是在J2EE构架中，需要用Struts标签循环生成一大段代码，其中JS需要重复调用，虽然没有任何报错，但是想要图片显示功能只能显示，却没有达到本来Jquery的效果
ＪＡＶＡ代码完全正确，可以输出，就是ＪＳ调用出错，各位指导
<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="/acshop/front/skin/mainstyle.css" rel="stylesheet" />
<link type="text/css" href="/acshop/front/skin/floor/adsstyle.css" rel="stylesheet" />
<link type="text/css" href="/acshop/front/skin/floor/floors.css"  rel="stylesheet"/>

<script type="text/javascript" src="../jQuery/jquery-1.4.2.min.js"></script> </head>
<body>
<!--部分省略-->
<!--代码开始--> <div class="cnt1">
<s:iterator value="getChannelList()">
<s:set name="channelId" value="getChannelId()"/><div id="floors<s:property value="#channelId"/>" class="floors">
<div class="f_top">
     <div class="f_num"><img width="100px;" height="35px" src="<s:property value="getChannelPicUrl()"/> "/></div>
     <div class="f_top_menu">
     <!-- keywords started -->
         <a href="#">aaaa</a>
        <!-- keywords ended -->
        </div>
    </div>
    
    <div class="f_down">
        <div class="f_Left">
        <!-- logo start -->
        <s:iterator value="getHotChannelBrandList(#channelId)">
         <div class="f_logos">
             <img src="<s:property value="getTradePhoto()" />" width="140px" height="50px" />
            </div>
        </s:iterator>
        <!-- logo end -->
        </div>
        
                <div class="f_Mid">
         <div class="f_Mid_cnt">
             <style type="text/css">
#picUp1 {
width: 480px;
}.pic_split_Slider1,.pic_split_Slider1 * {
margin: 0;
padding: 0;
}.pic_split_Slider1 {
width: 480px;
height: 200px;
overflow: hidden;
position: relative;
float: left;
border: 1px solid #cccccc;
}.slider1 {
position: absolute;
}.slider1 li {
list-style: none;
display: inline;
}.slider1 img {
width: 480px;
height: 200px;
display: block;
}.num1 {
width: 100%;
float: left;
text-align: center;
}.num1 div {
float: left;
color: #FF7300;
text-align: center;
line-height: 25px;
width: 158px;
height: 25px;
font-family: Arial;
font-size: 12px;
cursor: pointer;
overflow: hidden;
margin: 3px 0px 0 0;
border: 1px solid #FF7300;
background-color: #fff;
}.num1 div.on {
line-height: 25px;
color: #fff;
font-size: 14px;
background-color: #FF7300;
font-weight: bold;
}
</style>
<script language="javascript">
$(function() {
var len<s:property value="#channelId" /> = $("#idNum<s:property value="#channelId" /> > div").length;
var index<s:property value="#channelId" /> = 0;
$("#idNum<s:property value="#channelId" /> div").mouseover(function() {
index<s:property value="#channelId" /> = $("#idNum<s:property value="#channelId" /> div").index(this);
showImg<s:property value="#channelId" />(index<s:property value="#channelId" />);
});
}) function showImg<s:property value="#channelId" />(i) {
$("#idSlider<s:property value="#channelId" />").stop(true, false).animate( {
top : -200 * i}, 480);
$("#idNum<s:property value="#channelId" /> div").eq(i).addClass("on").siblings().removeClass("on");
}
</script><div id="picUp1">
<div class="pic_split_Slider1" id="idTransformView<s:property value="#channelId" />">
<ul class="slider1" id="idSlider<s:property value="#channelId" />">
<s:iterator value="getShowIndexLid(#channelId)" status="clist">
<s:set name="pname" value="getPicUrl()" />
<s:if test="#pname!=null">
<li>
<a target="_blank" href="<s:property value="getLinkUrl()"/>">
<img border="0" width="480px" height="200px"
src="../upfile/<s:property value="getPicUrl()"/>" alt="" /> </a>
</li>
</s:if>
</s:iterator>
</ul>
</div>
<div class="num1" id="idNum<s:property value="#channelId" />">
<s:set value="0" name="rowNo" />
<s:iterator value="getShowIndexLid(#channelId)" status="clist">
<s:set name="pname" value="getPicUrl()" />
<s:if test="#pname!=null">
<s:set name="rowNo" value="#rowNo+1" />
<div>
<s:property value="#rowNo" />
.
<s:property value="getName()" />
</div>
</s:if>
</s:iterator>
</div>
</div>
            </div>
        </div>
        
        <div class="f_Right">
        
   <div class="f_Right_cnt"> <script type="text/javascript" src="../jQuery/jquery.easing.1.3.js"></script> 
<script type="text/javascript" src="../jQuery/jquery.galleryview-1.1.js"></script> 
<script type="text/javascript" src="../jQuery/jquery.timers-1.1.2.js"></script>    <div class="f_Right_cnt">
                <script type="text/javascript">                     $(document).ready(function(){
                        $('#photos<s:property value="#channelId" />').galleryView({
                            panel_width: 330,
                            panel_height: 200,
                            frame_width: 30,
                            frame_height: 32,
                            overlay_color: '#222',
                            overlay_text_color: 'white',
                            caption_text_color: '#222',
                            background_color: 'transparent',
                            border: 'none',
                            nav_theme: 'dark',
                            easing: 'easeInOutQuad',
                            pause_on_hover: true
                        });
                    });
                </script> 
                <div id="photos<s:property value="#channelId" />" class="galleryview"> 
                <!-- image start -->
                <s:iterator value="getRandomIndexProduct(#channelId)"> 
                  <div class="panel"> 
                     <img src="../upfile/<s:property value="getProductThumb()" />" width="330" height="200" /> 
                    <div class="panel-overlay"> 
                      <h2><s:property value="getProductName()"/></h2> 
                      <p>Do you want to know more, please click <a href="#">here</a></p> 
                    </div> 
                  </div> 
                  </s:iterator>
                  <!-- image end-->     
                                    <ul class="filmstrip"> 
                  <s:iterator value="getRandomKeepingProductList()"> 
                  <!-- navigation start -->
                    <li><img src="../upfile/<s:property value="getProductThumb()" />" alt="Click to know more" title="<s:property value="getProductName()"/>" 
                    width="30px" height="30px" /></li> 
                    </s:iterator>
                  <!-- navigation end -->
                  </ul> 
                </div> 
            </div>
            </div>
        </div>    </div>
</div>
</s:iterator>
</div>
<!--代码结束 -->
</div>
<div id="footer">
<s:include value="buttom.jsp" />
</div>
</div>
</body></html>

解决方案 »

  1.   

    方便后面的人看....<%@ page contentType="text/html; charset=utf-8"%>
    <%@ taglib prefix="s" uri="/struts-tags"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link type="text/css" href="/acshop/front/skin/mainstyle.css" rel="stylesheet" />
    <link type="text/css" href="/acshop/front/skin/floor/adsstyle.css" rel="stylesheet" />
    <link type="text/css" href="/acshop/front/skin/floor/floors.css" rel="stylesheet"/><script type="text/javascript" src="../jQuery/jquery-1.4.2.min.js"></script></head>
    <body>
    <!--部分省略-->
    <!--代码开始--><div class="cnt1">
    <s:iterator value="getChannelList()">
    <s:set name="channelId" value="getChannelId()"/><div id="floors<s:property value="#channelId"/>" class="floors">
    <div class="f_top">
      <div class="f_num"><img width="100px;" height="35px" src="<s:property value="getChannelPicUrl()"/> "/></div>
      <div class="f_top_menu">
      <!-- keywords started -->
      <a href="#">aaaa</a>
      <!-- keywords ended -->
      </div>
      </div>
        
      <div class="f_down">
      <div class="f_Left">
      <!-- logo start -->
      <s:iterator value="getHotChannelBrandList(#channelId)">
      <div class="f_logos">
      <img src="<s:property value="getTradePhoto()" />" width="140px" height="50px" />
      </div>
      </s:iterator>
      <!-- logo end -->
      </div>
        
      <div class="f_Mid">
      <div class="f_Mid_cnt">
      <style type="text/css">
    #picUp1 {
    width: 480px;
    }.pic_split_Slider1,.pic_split_Slider1 * {
    margin: 0;
    padding: 0;
    }.pic_split_Slider1 {
    width: 480px;
    height: 200px;
    overflow: hidden;
    position: relative;
    float: left;
    border: 1px solid #cccccc;
    }.slider1 {
    position: absolute;
    }.slider1 li {
    list-style: none;
    display: inline;
    }.slider1 img {
    width: 480px;
    height: 200px;
    display: block;
    }.num1 {
    width: 100%;
    float: left;
    text-align: center;
    }.num1 div {
    float: left;
    color: #FF7300;
    text-align: center;
    line-height: 25px;
    width: 158px;
    height: 25px;
    font-family: Arial;
    font-size: 12px;
    cursor: pointer;
    overflow: hidden;
    margin: 3px 0px 0 0;
    border: 1px solid #FF7300;
    background-color: #fff;
    }.num1 div.on {
    line-height: 25px;
    color: #fff;
    font-size: 14px;
    background-color: #FF7300;
    font-weight: bold;
    }
    </style>
    <script language="javascript">
    $(function() {
    var len<s:property value="#channelId" /> = $("#idNum<s:property value="#channelId" /> > div").length;
    var index<s:property value="#channelId" /> = 0;
    $("#idNum<s:property value="#channelId" /> div").mouseover(function() {
    index<s:property value="#channelId" /> = $("#idNum<s:property value="#channelId" /> div").index(this);
    showImg<s:property value="#channelId" />(index<s:property value="#channelId" />);
    });
    })function showImg<s:property value="#channelId" />(i) {
    $("#idSlider<s:property value="#channelId" />").stop(true, false).animate( {
    top : -200 * i}, 480);
    $("#idNum<s:property value="#channelId" /> div").eq(i).addClass("on").siblings().removeClass("on");
    }
    </script><div id="picUp1">
    <div class="pic_split_Slider1" id="idTransformView<s:property value="#channelId" />">
    <ul class="slider1" id="idSlider<s:property value="#channelId" />">
    <s:iterator value="getShowIndexLid(#channelId)" status="clist">
    <s:set name="pname" value="getPicUrl()" />
    <s:if test="#pname!=null">
    <li>
    <a target="_blank" href="<s:property value="getLinkUrl()"/>">
    <img border="0" width="480px" height="200px"
    src="../upfile/<s:property value="getPicUrl()"/>" alt="" /> </a>
    </li>
    </s:if>
    </s:iterator>
    </ul>
    </div>
    <div class="num1" id="idNum<s:property value="#channelId" />">
    <s:set value="0" name="rowNo" />
    <s:iterator value="getShowIndexLid(#channelId)" status="clist">
    <s:set name="pname" value="getPicUrl()" />
    <s:if test="#pname!=null">
    <s:set name="rowNo" value="#rowNo+1" />
    <div>
    <s:property value="#rowNo" />
    .
    <s:property value="getName()" />
    </div>
    </s:if>
    </s:iterator>
    </div>
    </div>
      </div>
      </div>
        
      <div class="f_Right">
        
      <div class="f_Right_cnt"><script type="text/javascript" src="../jQuery/jquery.easing.1.3.js"></script>  
    <script type="text/javascript" src="../jQuery/jquery.galleryview-1.1.js"></script>  
    <script type="text/javascript" src="../jQuery/jquery.timers-1.1.2.js"></script>    <div class="f_Right_cnt">
      <script type="text/javascript">    $(document).ready(function(){ 
      $('#photos<s:property value="#channelId" />').galleryView({
      panel_width: 330,
      panel_height: 200,
      frame_width: 30,
      frame_height: 32,
      overlay_color: '#222',
      overlay_text_color: 'white',
      caption_text_color: '#222',
      background_color: 'transparent',
      border: 'none',
      nav_theme: 'dark',
      easing: 'easeInOutQuad',
      pause_on_hover: true
      });
      });
      </script>  
      <div id="photos<s:property value="#channelId" />" class="galleryview">  
      <!-- image start -->
      <s:iterator value="getRandomIndexProduct(#channelId)">  
      <div class="panel">  
      <img src="../upfile/<s:property value="getProductThumb()" />" width="330" height="200" />  
      <div class="panel-overlay">  
      <h2><s:property value="getProductName()"/></h2>  
      <p>Do you want to know more, please click <a href="#">here</a></p>  
      </div>  
      </div>  
      </s:iterator>
      <!-- image end-->   
          <ul class="filmstrip">  
      <s:iterator value="getRandomKeepingProductList()">  
      <!-- navigation start -->
      <li><img src="../upfile/<s:property value="getProductThumb()" />" alt="Click to know more" title="<s:property value="getProductName()"/>"  
      width="30px" height="30px" /></li>  
      </s:iterator>
      <!-- navigation end -->
      </ul>  
      </div>  
      </div>
      </div>
      </div>  </div>
    </div>
    </s:iterator>
    </div>
    <!--代码结束 -->
    </div>
    <div id="footer">
    <s:include value="buttom.jsp" />
    </div>
    </div>
    </body></html>
      

  2.   


    我的程序是这样的，我有N各channel要被显示在首页上，每个Channel的HTML，JS和CSS的代码都相同，只是从数据库读出来的内容不同而已，所以我希望能根据channelId， 用Iterator生成这些相同部分的代码。
    中间就涉及到要 循环 使用 js。程序没什么报错，但是本来单个js可以实现效果，插入到要循环的部分，效果就没有了。请问如何解决这个问题，谢谢